Welcome to WebmasterWorld Guest from 107.20.104.161

Forum Moderators: not2easy

Message Too Old, No Replies

100% height DIV

It works in IE, but not in Firefox

     

rubenski

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

10+ Year Member



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

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

10+ Year Member



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

rubenski

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

10+ Year Member



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

4:14 pm on Jan 15, 2005 (gmt 0)

10+ Year Member



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

5:38 pm on Jan 15, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



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

2:57 am on Jan 19, 2005 (gmt 0)

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

2:48 am on Jan 20, 2005 (gmt 0)

10+ Year Member



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

4:23 pm on Jan 20, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

8:06 pm on Mar 2, 2005 (gmt 0)

10+ Year Member



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

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

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month