PDA

View Full Version : flexible box height - how to via CSS

bradyj
05-28-2003, 08:11 PM
How would you make a box via CSS that would have a flexible height to it in accordance with the page?

For example I would have three boxes:
<div>
<span class="top">content content content</span>
<span class="middle">CONTENT CONTENT CONTENT</span>
<span class="bottom">Content Content Content</span>
</div>

...and the 'middle' and 'bottom' would have a fixed height like:

.middle {
display: block;
height: 350px;
width: 100%;
color: #FFFFFF;
background-color: #000066;
margin: 0px;
padding: 0px;
}
.bottom {
display: block;
height: 23px;
width: 100%;
color: #666666;
background-color: #FFFFFF;
border-top: 1px dotted #333333;
margin: 0px;
padding: 0px;
}

...how would I make a top box that would fill the REMANDER of the page as it is sized and resized that the bottom two boxes did not fill? Similiar to a flexible frame or table height?
Mr J
05-28-2003, 09:04 PM
Please try the following. (my browser is IE 5.5)


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script language="Javascript">
<!--
function resizeme(){
W=document.body.clientWidth // get window width
H=document.body.clientHeight // get window height

oTOP_height=parseInt(document.getElementById("oTOP").style.height) // oTOP height
oMIDDLE_height=parseInt(document.getElementById("oMIDDLE").style.height) // oMIDDLE height
oBOTTOM_height=parseInt(document.getElementById("oBOTTOM").style.height) // oBOTTOM height

document.getElementById("oTOP").style.width=W // resize oTOP width
document.getElementById("oMIDDLE").style.width=W // resize oMIDDLE width
document.getElementById("oBOTTOM").style.width=W // resize oBOTTOM width

document.getElementById("oTOP").style.height=H-(oMIDDLE_height+oBOTTOM_height) // resize oTOP height
}
onresize=resizeme
// -->
</script>

</HEAD>
<BODY onload="resizeme()">

<div id="oTOP" style="position: absolute;left:0px; top:0px; height:100px; background-color:green">
Content
</div>

<div id="oMIDDLE" style="position: absolute;left:0px; bottom:23px; height:350px; width:100%; background-color:blue">
Content
</div>

<div id="oBOTTOM" style="position: absolute;left:0px; bottom:0px; height:23px; width:100%; background-color:yellow">
Content
</div>

</BODY>
</HTML>
bradyj
05-28-2003, 09:51 PM
I viewed it in Mac IE 5.2 and it is a little quirky... that's cool though, and I thank you for showing me that. I was looking for a CSS Box property, however, not an extra Javascript code (though, again, it was really cool) -- is there not a way to do that without the Javascripting?