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 :-)

2
  • Which browsers do you need to support? IE7? Only modern ones?
    – thirtydot
    Nov 8, 2011 at 22:44
  • @thirtydot: IE7 is the oldest I should support. But if that's not possible, I might think about just ignoring IE7 :-) Nov 8, 2011 at 23:00

5 Answers 5

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);
0
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>

2
  • 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. Nov 8, 2011 at 22:32
  • In that case use can set max-height to 150 px for the second div
    – tmjam
    Nov 8, 2011 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>
1
  • Hm, I need a cross browser solution, only supporting FF is not going to work. Nov 8, 2011 at 23:10
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

1
  • This didn't help. It still extends, just with showing a disabled scrollbar Nov 8, 2011 at 22:28
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.

4
  • 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. Nov 8, 2011 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 8, 2011 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. Nov 8, 2011 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 8, 2011 at 23:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.