I have a fixed width layout where I'm displaying the header and footer at 100% width and my content in the center is fixed at 960px wide. I'd like to make the center content fill the screen even when there isn't enough content to do it. You can view the site at http://www.gaso-wheatley.com/ and here's the relevant code:
HTML:
<body>
<div id="wrapper">
<div id="headerbg">
<div id="header">
<div id="headerlogo">
</div>
<div id="headertext">
</div>
</div>
</div>
<div id="contentwrapper">
<div id="content">
</div>
<div class="push">
</div>
</div> <!-- contentwrapper -->
</div> <!-- wrapper -->
<div id="footer">
<div id="footertext">
</div>
</div> <!-- footer -->
</body>CSS:
html {
height: 100%;
}
body{
margin:0;
padding: 0;
height: 100%;
}
#wrapper{
display: block;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
#headerbg {
width: 100%;
height: 131px;
}
#header {
width: 960px;
height: 131px;
top: -131px;
margin: 0px auto;
}
#headerlogo {
display: inline;
float: left;
width: 235px;
height: 100px;
margin: 0px;
padding: 0px;
}
#headertext{
padding-top: 16px;
display: inline;
float: right;
height:50px;
width:220px;
}
#contentwrapper {
margin: 0px auto;
width: 960px;
height: 100%;
min-height: 100%;
}
#content{
margin: 0;
width: 940px;
padding: 10px;
}
.push {
height: 50px;
}
#footer{
display: block;
width: 100%;
height: 50px;
}
#footertext {
width: 960px;
height: 34px;
padding-top: 16px;
margin: 0px auto;
}