How do I force a DIV block to extend to the bottom of a page even if it has no content?
Posted
by
Vince Panuccio
on Stack Overflow
See other posts from Stack Overflow
or by Vince Panuccio
Published on 2008-09-29T04:40:24Z
Indexed on
2012/05/31
4:40 UTC
Read the original article
Hit count: 161
In the markup shown below, I'm trying to get the content div to stretch all the way to the bottom of the page but it's only stretching if there's content to display. The reason I want to do this is so the vertical border still appears down the page even if there isn't any content to display.
Here is my code
<body>
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
and my CSS
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header
{
width: 100%;
height: 100px;
}
#header a
{
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100%
}
#menu, #content {
width:1024px;
margin: 0 auto;
}
div#menu {
height: 25px;
background-color:#50657a;
}
Thanks for taking a look.
© Stack Overflow or respective owner
