...

View Full Version : How to have a div auto-fill to the bottom of a page



bcarl314
11-23-2002, 06:56 PM
I'm using this below



<html>
<head>
<style type="text/css">
body {
border:0;
margin:0;
background-color:white;
font-family:arial;
font-size:8pt;
width:100%;
height:100%;
}
.top {
position:absolute;
left:0;
top:0;
background-color:#00cc00;
width:100%;
height:100;
}
.topMenu {
position:absolute;
height:30;
top:100;
left:0;
width:100%;
background-color:#000000;
color:#ffffff;
}
.left {
position:absolute;
left:0;
top:130;
width:150;
height:100%;
background-color:#ff0000;
}
.main {
position:absolute;
left:150;
top:130;
height:auto;
width:auto;
}
</style>
</head>
<body>
<div class="top">TOP</div>
<div class="topMenu">TOP MENU</div>
<div class="left">LEFT</div>
<div class="main">COPY HERE</div>
</body>
</html>


and what I'd like to do is have my "left" div start at 130 pixels from the top and fill to the bottom. I've set the height to auto, but that only fills to where the contents will fill to, I've set it to 100% but that starts at 130 pixels from the top, and goes to 130 pixels past the bottom of the screen. Is there any way just to fill the remainder?

COBOLdinosaur
11-24-2002, 02:44 AM
I think you will have to script it. give the div an id so you can reference it then try adding this between </style> and </head>

<script language="JavaScript">
<!--
function resetH()
{
document.getElementById('divid').offsetTop-=130;
}
onload=resetH;
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum