Geek Answers Handbook

Divs with scrollbars in a fixed size div

I basically have this layout:

<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 the entire remaining height of the parent div and show the scroll bar if more space is required. How can i achieve this? Currently, the second div never shows the scroll bar and just uses the necessary space, even if it exceeds the total height of the parents ...

UPDATE:
Check out the test solution :-)

+7
source share
5 answers

Using jQuery may 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);
+1
source

I only know how to do this using the future flexbox layout model. Here's how you could 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
source

If you set overflow-y: scroll; as well as height: auto; on a child, you should be able to achieve the effect of the scroll bar without exceeding the parent

0
source

Set the maximum height in 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>

0
source

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

Here is 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 child div is 100px , the remaining space of the second child div will be 100px . So, if you set min-height and max-height to 100px , then the div will fill in the remaining space and display the scroll bar if the content is larger than max-height .

I'm sure you need an answer that is flexible, depending on the size of the original parent div, but I don't think this is easy in this case.

0
source

More articles:


All Articles