Welcome to WebmasterWorld Guest from 54.225.20.19

Forum Moderators: not2easy

Message Too Old, No Replies

100% height DIV

It works in IE, but not in Firefox

     
2:19 pm on Jan 15, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Nov 28, 2003
posts:274
votes: 0


Hi,

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?

3:48 pm on Jan 15, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 14, 2004
posts:195
votes: 0


Actually, it does work, but you'll need to change this :
'width=10px;' to this 'width:10px;'.
4:09 pm on Jan 15, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Nov 28, 2003
posts:274
votes: 0


Ups, my mistake. However, in my test file I didn't make that mistake. I just noticed that the DOCTYPE declaration prevents Firefox from displaying a vertically stretched DIV. When I remove it, it works fine in IE and FF. But I don't want to remove the doctype declaration for validation purposes. Would it be possible to have FF display the vertical DIv with the use of a DOCTYPE?
4:14 pm on Jan 15, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 14, 2004
posts:195
votes: 0


D'oh! That was a stupid mistake (I did the same thing - just put your code on a page and then tested it). But yeah - to get 100% height with the valid DTD, you need

html {height:100%;}
5:38 pm on Jan 15, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 9, 2003
posts:1908
votes: 0


Notice that this only makes the <div> the same height as the viewport. If your page content extends beyond the bottom of the initially viewable area, you'll find your div doesn't reach clear to the bottom of the page, only down to the point to which could be seen when the page first loaded.

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.

4:09 pm on Jan 18, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:May 20, 2004
posts:469
votes: 0


If you set HTML and body to 100% and your column to 150%, you get a lot of extra space in the other column, but it worked for me.
2:57 am on Jan 19, 2005 (gmt 0)

New User

10+ Year Member

joined:Jan 19, 2005
posts:2
votes: 0


I'm wondering what DOCTYPE declaration are you using? I'm curious because I can't get 100% height to work WITH html,body{height: 100%;}. It simply doesn't work in either IE or FF. I really need help with this one.

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>

3:34 pm on Jan 19, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 9, 2003
posts:1908
votes: 0


Just guessing without trying your code, I'd say your problem is that your #pageContent, set to 100% height, is inside your #mainContainer, which is seto to automatic height. Try setting #mainContainer to 100% as well and see what happens.
2:48 am on Jan 20, 2005 (gmt 0)

New User

10+ Year Member

joined:Jan 19, 2005
posts:2
votes: 0


Yea I've tried that. When mainContainer is 100%, it only goes 100% of the visible screen, not content. Of course that still didn't work in IE either (not even the visible screen). I thought the auto setting was supposed to work when body and html are 100%. pageContent simply won't stretch.
4:23 pm on Jan 20, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 9, 2003
posts:1908
votes: 0


Right, my earlier post (msg. 5) addressed this difficulty. So far I haven't found a workaround for it, except for what jo1ene said to try.
8:06 pm on Mar 2, 2005 (gmt 0)

Full Member

10+ Year Member

joined:July 8, 2001
posts:267
votes: 0


This is the problem im having (the bg color box wont stretch past the screen height).

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.

5:58 am on Mar 9, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts:646
votes: 0


HTML 4.01 Transitional allows height properties in CSS. XHTML 1.0 Transitional and Strict do not. These are the defined by the doctype declaration.

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.