Menu
I am trying to make a div that contains three divs. The first and last div should be sized based on their contents. If they contain 10 lines of text they should be large enough to show that without overflowing or scrolling.
The middle div should use the remaining amount of space and should use a scrollbar when there is not enough space to show its entire contents.
I have gotten a partial solution where the first and third blocks are fixed and the third block will use the remaining size. I am not sure how to make the jump to allow the first and third blocks to be sized based on their contents.
Any tips on how to do this would be greatly appreciated.
This is what I have so far:
<html>
.outerDiv{
/* The contents of this don't really matter */
position: absolute;
height:400px;
top:25px;
}
.innerA{
position: absolute;
top:0ex;
height:3ex; /* How can I set this based on the contents of the div? */
}
.innerB{
position: absolute;
top: 4ex; /* This needs to be based on the size of innerA */
bottom: 4ex; /* This needs to be based on the size of innerC */
overflow-y: scroll;
}
.innerC{
position: absolute;
height:3ex; /* How can I set this based on the contents of the div? */
bottom:0ex;
}
</style>
<div class="outerDiv" style="width:100%; border:1px solid #888888;">
<div class="innerA" style="width:70%; border:1px solid #000088;"></div>
<div class="innerB" style="width:60%; border:1px solid #008800;">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>vv</div>
<div class="innerC" style="width: 50%;border:1px solid #001100;"></div>
</div>
</html>
My preference would be to solve the problem using:
359
If you don't mind jquery, you can calculate the heights of the A and C divs and then subtract from your outerDiv:
$(".innerB").each(function() {
var outerDivHeight = $('.outerDiv').outerHeight();
var innerAHeight = $('.innerA').outerHeight();
var innerCHeight = $('.innerC').outerHeight();
var innerBHeight = outerDivHeight - innerAHeight - innerCHeight;
$(this).css("height", innerBHeight);
});
Here's a fiddle for it: http://jsfiddle.net/Sz6CL/
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
