Stretch a block element to fill 100% vertical scroll height of its parent element

Question

I have a layout with a vertical scroll. One of the child elements within the scrollable div is absolutely positioned with a large top value, inducing a vertical scrollbar on the parent. The scrollable parent div also has some child div elements (lets call them pillars) positioned horizontally adjacent to each other via position: absolute and some left value.

Here's the HTML markup:

<div id="root" style="height: 250px; position: relative;">
<div class="stretch">
    <div id="container" class="container">  
         <div id="pillar1" style="left: 0.0%; width:33.25%;" class="pillar" ></div>
         <div id="pillar2" style="left: 33.05%; width:33.25%;" class="pillar" ></div>
         <div id="pillar3" style="left: 66.05%; width:33.25%;" class="pillar" ></div>     
         <div id="fixed-and-not-movable" style="background: blue; width: 25px; height: 25px; top:350px; left: 150px; position: absolute;">
    </div>          
</div>

and the CSS:

.stretch {
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
    position: absolute; 
    height: auto; 
    width: auto;    
}

.container {
    border: 2px solid;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
}

.pillar {
    border: 1px dotted red;
    bottom: 0;
    height: 100%;
    position: absolute;
    top: 0;    
}

I want the pillar divs to capture the entire scroll height of the parent "container". Right now their height is the parents client height (not scroll height). So when you scroll down you will notice the pillars are not filling all the available height inside the overflow:scroll.

Can someone suggest changes to CSS classes (.container and/or .pillar) to make this work.

Here's a link to js fiddle showing the same problem: http://jsfiddle.net/AshwinPrabhuB/2o5whkmq

Thanks!

Answer 1

The best approach to get the max-height possible of the parent is to make its position fixed or absolute and instead of providing a height value you set the top attribute to zero and the bottom attribute to zero.

.parent {
  position: relative;

  .child {
    position: fixed; // or absolute
    top: 0; // anchors element to the top
    bottom: 0; // anchors element to the bottom
  }
 }

Answer 2

The div .pillar is given position:absolute , so it is not taking height according to it's parent i.e, .container.

Simply remove position:absolute from css of .pillar.

Here is the FIDDLE.

Changes in CSS:

.pillar {
        border: 1px dotted red;
        bottom: 0;
        height: 100%;
        float:left;
        /*position: absolute;*/
        top: 0;  
        left:0 !important;
        width:32% !important;
    }

I have given a width of 32% because the borders currently used won't let it fit in the given width. Also, there is no need to specify the values for left explicitly for each of the pillars now. So I have just overridden these values.

EDIT: I understood it wrong. Now here's the corrected one.

Give height of the pillar as 100vmax. This unit will give it 100/100 size of the viewport, as I understood. Although the log is still showing unmached values for the heights. But I guess this is close enough. Also, the blue box is coming in it's way.

Check the FIDDLE.

.pillar {
    border: 1px dotted red;
    bottom: 0;
    height: 100vmax;
    float:left;
    /*position: absolute;*/
    top: 0;  
    left:0;
    width:32%;
}