How to force a DIV block to extend to the bottom of a page, even if it has no content?
Posted
by Sir Psycho
on Stack Overflow
See other posts from Stack Overflow
or by Sir Psycho
Published on 2008-09-29T04:40:24Z
Indexed on
2010/05/08
0:38 UTC
Read the original article
Hit count: 293
Hi,
I'm trying to get the content div to stretch all the way to the bottom of the page but so far, its only stretching if theres actual content to display. The reason I want to do this is so if there isn't much content to display, the vertical border still goes all the way down.
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 looksi
© Stack Overflow or respective owner
