homepage Welcome to WebmasterWorld Guest from 54.166.123.2
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
100% height DIV
It works in IE, but not in Firefox
rubenski




msg:1188995
 2:19 pm on Jan 15, 2005 (gmt 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?

 

BonRouge




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

Actually, it does work, but you'll need to change this :
'width=10px;' to this 'width:10px;'.

rubenski




msg:1188997
 4:09 pm on Jan 15, 2005 (gmt 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?

BonRouge




msg:1188998
 4:14 pm on Jan 15, 2005 (gmt 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%;}

MatthewHSE




msg:1188999
 5:38 pm on Jan 15, 2005 (gmt 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.

jo1ene




msg:1189000
 4:09 pm on Jan 18, 2005 (gmt 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.

razorphreak




msg:1189001
 2:57 am on Jan 19, 2005 (gmt 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>

MatthewHSE




msg:1189002
 3:34 pm on Jan 19, 2005 (gmt 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.

razorphreak




msg:1189003
 2:48 am on Jan 20, 2005 (gmt 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.

MatthewHSE




msg:1189004
 4:23 pm on Jan 20, 2005 (gmt 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.

kingkelly




msg:1189005
 8:06 pm on Mar 2, 2005 (gmt 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.

Setek




msg:1189006
 5:58 am on Mar 9, 2005 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved