How to make a div scale to 100% height inside a vertical scrollable div?

Question

I want div2's height to be 100% of div1 even if scrolled down to the bottom-most part (not just 100px). Is this possible with CSS only?

http://jsfiddle.net/jPMjF/2/

<div id="div1">
     <div id="div2">
     </div>
     <p>Bunch of text here</p>
</div>

#div1 {
   background-color: #fff;
   border:1px solid #ff0000;
   height: 100px;
   overflow: auto;
   overflow-x: hidden;
   width: 200px;
}

#div1 p {
    display: inline-block;
    width: 50px;
    height: 200px;
}

#div2 {
    display: inline-block;
    background-color: #ccc;
    vertical-align: top;
    width: 100px;
    height: 100%
}

Answer 1

Why would div1 ever exceed 300px scrollable height if div2 was less than 300px? From what you've posted, I think all you need is:

#div1 {
   height: 300px;
   overflow-x: hidden;
   overflow-y: auto;
}

#div2 {
    background-color: #ccc;
    min-height: 100%;
}

This means div2 fills the entire container when less than 300px height but can still expand should the container overflow with a scrollbar.

EDIT

Okay, so it seems this is unsuitable. At this point I would be leaning towards a few situational options:

1. If you know that only one of div2 or p (say we place this within div3) will ever exceed 300px in height then you could set the background of div1 to match the opposite div. This means any white space below the smaller div will have the same background, appearing the same to the user.
2. If both div2 and div3 will have a fixed width then you can clear both backgrounds and just place a background image on the container div. (This would clearly be a vertically repeating 1px strip with a colour split somewhere down the middle.)
3. If you are not catering for older browsers you could use the CSS3 flexible box model, which as I understand it is meant to expand to fill all space within a container.
4. You could use the display: table property as a somewhat "hackish" method to table style. Be aware that css tables don't seem to allow fixed heights, they will overflow to show all content without scrollbars, so you will need to place it within an outer container set to inline-block, fixed width with appropriate overflow values.

Answer 2

I think you mean this: http://jsfiddle.net/jPMjF/

   #div1 {
       height: 300px
       overflow: auto;
       overflow-x: hidden;
    }

    #div2 {
        background-color: #ccc;
        min-height: 300px;
    }

This way, div2 will scroll within div1 even if the content exceeds the height of div1 (on the fiddle, i gave div2 a height of 600px).

Answer 3

i made a slight modifications.. Hope you will understand this..

html

<div id="div1">
     <div id="div2">
         Content in div2.
     </div>
    <p id="p3">
        ajs hask jas ashja sjh jasj ashja sbasj hasbk asj ask ashja sba sjh ashj asb sajask ajhb sakjbs ashjb saasj
    </p>
</div>

Jquery

$(document).ready(function(){
  var div3height=$('#div3').height();
    $('#div2').height(div3height);
});

css

    #div1 {
       border:1px solid #ff0000;
       height: 150px;
       overflow: auto;
       overflow-x: hidden;
       width:150px;
    }

    #div2 {
        background-color: #ccc;
        height:100%;
        overflow:auto;
        float:left;
        width:50%;
    }
    #p3 {
        height:auto;
        overflow:auto;
        float:left;
        width:50%;
}

hope this will help you..

EDIT

in case if the question was meant as stated by Ipd

then you just need to change the css and leave the jquery part...

ie..

css

#div1 {
       border:1px solid #ff0000;
       height: 150px;
       overflow: auto;
       overflow-x: hidden;
       width:150px;
       background-color: #ccc;
    }

    #div2 {
        height:100%;
        overflow:auto;
        float:left;
        width:50%;
    }
    #p3 {
         background-color:#FFF;
        height:auto;
        overflow:auto;
        float:left;
        width:50%;
}

Answer 4

Working jsFiddle Demo

HTML

<div id="container">
    <div id="sidebar">
        Content in div2.
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
    </div>
</div>

CSS

#container {
   background-color: #fff;
   border: 1px solid #ff0000;
   height: 100px;
   overflow: hidden;
   width: 200px;
    position: relative;
}

#content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: pink;
    width: 100px;
    overflow: auto;
}

#sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #ccc;
    width: 100px;
}

Answer 5

#div1 {
    background-color: #fff;
   border:1px solid #ff0000;
   height: 100px;
   overflow: auto;
   overflow-x: hidden;
   width:200px;
}

#div1 p { display: inline-block; width: 50px; }

#div2 {
    display: table-cell;
    background-color: #ccc;
    height: auto;
    width: 100px;
    padding-bottom:80%;
    float:left;
}

Your answer check this its work 100%