Forum Moderators: not2easy
I learned from this forum that you can get a div to stretch vertically by assigning a 100% width to it and to it's container (the document body or another div).
Here is a simple example
<body style="height:100%">
<div style="background-color:#cccccc; height:100%; width=10px;">
blablabla
</div>
</body>
This produces the desired result in IE6, but in Firefox 1.0 the div doesn't stretch vertically. How could I get this to work in Firefox?
html {height:100%;}
I've seen at least one CSS layout where two sidebar divs actually do stretch the whole height of the page even with scrolling, but I haven't looked into how it's done yet. I do know it's not using the "faux columns" technique.
Maybe some code would be helpful as to where my problem might be (its .NET code so please forget the uc:header/footer references):
The CSS:
/* Page Style */
html, body
{
height: 100%;
min-height: 100%;
}
/* DIV Styles */
#mainContainer
{
width: 765px;
margin: 0 auto;
background-color: #ffffff;
text-align: left;
height: auto;
}
#pageContent
{
height: 100%;
min-height: 100%;
height: auto;
}
#pageHeader
{
padding-bottom: 2px;
}
#pageFooter
{
text-align: center;
padding-top: 6px;
clear: both;
}
.pageTwoColLeft
{
float:left;
width:350px;
}
.pageTwoColRight
{
margin-left:350px;
}
The HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
...
<div id="mainContainer">
<div id="pageHeader"><uc:header id="header1" runat="server" /></div>
<div id="pageContent">
<div><p class="PageTitle" align="center">Big Title</p></div>
<div>
<div class="pageTwoColLeft"><p align="center"><b>Page Stuff</b></p>
<ul>
<li>blah blah blah</li>
<li>blah blah blah</li>
</ul></div>
<div class="pageTwoColRight"><p align="center"><b>National Scouting Forms</b></p>
<ul>
<li>blah blah blah</li>
</ul></div>
</div>
</div>
<div id="pageFooter" class="medium"><uc:footer id="footer1" runat="server" /></div>
</div>
Call me crazy, but shouldnt this be somethign that a lot of people are trying to do? I hate making sites with CSS and this is why.
If you're looking for a plain colour to stretch vertically (say, through a vertical menu) it's best to have a 1px high image to repeat-y throughout the your body, or entirety container. If you're looking for other solutions outside of the scope of CSS, you may want to try Javascript.
