I have this HTML:
<body>
<div id="logo">
<table id="width100" cellpadding="0" cellspacing="0" >
<tr>
<td width="33.33%" align="left"> </td>
<td width="33.34%" align="center"><a href="http://www.rawgameshop.com/"><img src="images/logo_new.png" /></a></td>
<td width="33.33%" align="right"><img src="images/logo_right.png" /></td>
</tr>
<tr bgcolor="#731000" id="width100">
<td height="15" colspan="3" ></td>
</tr>
</table>
</div>
<center>
<div id="container">
<div id="main_body">
asd
</div>
</div>
</center>
And this CSS:
body {
width:100%;
height:100%;
margin:0px;
background-color:#ECECEC;
}
#logo {
width:100%;
height:165px;
background-color:#FFFFFF;
}
#width100 {
width:100%;
}
#container {
background-color:#FFFFFF;
height:100%;
width:900px;
}
#main_body {
width:800px;
background-color:#FFFFFF;
height:100%;
}
My question is: why doesn't my main_body div stretch down across the middle of the page? It is only as tall as the letters.
If I remove the <center> HTML tags it does stretch down, but at 100% screen size, that means I have to scroll down to the end. I wanted it to be to the edge of the screen, not further.
height:100% takes the height of the first parent element that has a height set on it. As all your parent objects have a percentage height on it will go right up to the body and take 100% of that height.
You will either need to set #logo as a percentage height and then your main_body as the rest of the percentage otherwise you will need javascript / jquery to resize your main_body as css hasn't enabled a way to do calculations yet (although I think it may be coming soon)
Have a look at this post as they were trying to achieve the same thing:
Calculate value with CSS3
If you are going the jQuery route you will need to add the jquery library to your page (I usually put this at the bottom of the page) and then anywhere after this you need to include your script you are going to run like so:
<script type="text/javascript">
$(document).ready(function () {
var newHeight = $(window).height() - $('#logo').height();
var oldHeight = $('#container').height();
if (newHeight > oldHeight) {
$('#container').height(newHeight);
}
});
</script>
the $(document).ready(function(){}) means that anything that is within the function will be fired once the document (web page) has finished loading
Add height:100% to html,body and remove <center> tag instead use margin:0 auto to #container
html,body{height:100%}
#container {
background-color:red;
height:100%;
width:900px; margin:0 auto
}
#main_body {
width:800px;
background-color:#FFFFFF;
height:100%; margin:0 auto
}
DEMO
For that issue change the html like this,
- Add an outer div to entire markup, make it
position:relative and give position:absolute to container div
- use
z-index to push the container div below the logo div.
- Finally add an empty div inside the
#main_body to give the
height(same as logo div height)
HTML
<div id="wrapper">
<div id="logo">
logo html
</div>
<div id="container">
<div id="main_body">
<div class="space"></div>
asd
</div>
</div>
</div>
CSS
#wrapper{
height:100%;
background:grey;
position:relative;
}
#container {
background-color:red;
height:100%;
width:900px;
margin:0 auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
z-index:1;
}
#main_body {
width:800px;
background-color:#FFFFFF;
height:100%;
margin:0 auto;
}
.space{height:165px}
DEMO 2
