9

I basically have a layout like this:

<body>
    <div style="height: 150px; width: 200px; background: green">
      <div style="overflow: auto; max-height: 100px; background: blue">
        some content <br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content
      </div>
      <div style="overflow: auto; background: red">
        some more content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content
      </div>
    </div>
</body>

Now, I want the second div to fill all remaining height of the parent div and show the scroll bar if more space is needed. How can I achieve this? Currently, the second div never shows a scroll bar and just uses the space it needs, even if that will exceed the parents total height...

UPDATE:
Please test the solution you provide :-)

Daniel Hilgarth
  • 171,043
  • 40
  • 335
  • 443

5 Answers5

5

Using Jquery might help

<body>
<div style="height: 150px; width: 200px; background: green">
  <div id="c1" style="overflow: auto; max-height: 100px; background: blue">
    some content <br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
  <div id="c2"style="overflow: auto; background: red">
    some more content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
</div>

in document.ready add this

 var h1=$('#c1').height();
var h2 = 150-h1;
$('#c2').height(h2);
tmjam
  • 1,029
  • 2
  • 12
  • 25
1

Set max-height to the second div as well

<body>
<div style="height: 150px; width: 200px; background: green">
  <div style="overflow: auto; max-height: 100px; background: blue">
    some content <br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
  <div style="overflow: auto; background: red; max-height: 50px">
    some more content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
</div>

tmjam
  • 1,029
  • 2
  • 12
  • 25
  • That's not helpful. I want the second div to use all available space in the parent div. With this max-height setting it will not use the space of the first div if that is empty. – Daniel Hilgarth Nov 08 '11 at 22:32
  • In that case use can set max-height to 150 px for the second div – tmjam Nov 08 '11 at 22:36
1

I only know how to do with this using the forthcoming flexbox layout model. This is how you would do it in current versions of Firefox:

<div style="height: 150px; width: 200px; display: -moz-box; -moz-box-orient: vertical; background-color: green;">
  <div style="overflow: auto; min-height: 1px; max-height: 100px; background-color: blue;">
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
  <div style="overflow: auto; min-height: 1px; -moz-box-flex: 1; background-color: red;">
    some more content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
</div>
Neil
  • 54,642
  • 8
  • 60
  • 72
0

If you set overflow-y: scroll; and height: auto; on the child element, you should be able to achieve the scrollbar effect without exceeding the parent element

Evan
  • 835
  • 1
  • 6
  • 14
0

I don't think there is a way to do this flexibly, but it's possible if you can know/set the height of the original div and then the next two divs.

Here's what I came up with:

<body>
    <div style="height:200px; width: 200px; background: green;">
      <div style="overflow: auto; max-height: 100px; background: blue">
        some content <br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content
      </div>
      <div style="overflow: auto; background: red; min-height:100px; max-height:100px;">
        some more content<br/>
        some content<br/>
        some more content<br/>
        some content<br/>
      </div>
    </div>
</body>

If the original div is 200px and then the first daughter div is 100px, the remaining space of the second daughter div will be 100px. So, if you set the min-height and max-height each to 100px, then the div will fill the remaining space and display a scroll bar if the content is greater than the max-height.

I'm sure you wanted an answer that would be flexible, depending upon the size of the original parent div, but I don't think it's that easy in this case.

Charlie
  • 11,380
  • 19
  • 83
  • 138
  • The main problem with your approach is not that it doesn't derive the height from the parent, but that it doesn't work as I want it! The second div is not using all available space inside its parent. – Daniel Hilgarth Nov 08 '11 at 23:01
  • How is it not? If the parent div is 200px, the first daughter div is 100px, then the second daughter div would use the remaining 100px left. – Charlie Nov 08 '11 at 23:12
  • The second div will use a maximum of 100px, regardless of the height of the first div. Even if that has a height of 0 because it is empty... That's why the first div has a `max-height` and not a `height`. – Daniel Hilgarth Nov 08 '11 at 23:22
  • Yes, I said that in my answer. I don't think there is a way to do this in pure CSS, especially something that is cross browser. – Charlie Nov 08 '11 at 23:26