DIV 100% stretch? Not Working Firefox?

**aaron1a12** · 08-20-2010, 03:36 AM

Hi guys, I know this is typical but I've searched and searched and I have found no successful results with this problem; a div that stretches it's height to 100%.

Consider the following code

HTML Code:

<head>
<title></title>
<style type="text/css">
body{margin:0;padding:0;height:100%}
</style>
</head>
<body>
<div id="layer1" style="background-color:lime; width:100%; height:100%">
    <p>Hello World!</p>
</div>
</body>
</html>

The DIV stretches well in IE, Webkit (Safari, Chrome), and Opera. BUT NOT FIREFOX. Instead firefox renders a gap before the DIV thus giving scrollbars

.

Can this be fixed with CSS? Should I change the DOCTYPE?

**traq** · 08-20-2010, 03:55 AM

well, I figured it was a default-margin issue, but no. The white space appears to belong to the <html> element but I can't figure any way to affect it...

this solves the immediate problem, but it's kinda hacky and could cause other issues, depending on how the rest of your page is set up:

Code:

#layer1{ position: fixed; top: 0; }

**coothead** · 08-20-2010, 08:17 AM

Hi there aaron1a12,

Should I change the DOCTYPE?

Your code does not have a DOCTYPE to change.

No DOCTYPE equates to"Qurks Mode" which equates to cross-browser problems.

Once you use a full valid DOCTYPE you will find that all browsers, except IE6 and possibly IE7, will render your code in a similar manner.

All the modern browsers like Firefox,Safari, Opera and Chrome will now display space at the top of the div element.
You will also find that the div element no longer extends to the bottom of the page.

The space at the top is due to the default margin of the p element.
The lack of 100% page height is due to incorrect CSS in "Standards Compliance Mode".
This basically means that you now need to give a height value to the html element also.

Your code with these modifications should now look something like this...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>As yet, an untitled document</title>

<style type="text/css">
html,body{
    margin:0;
    padding:0;
    height:100%;
 }
#layer1 {
    height:100%;
    background-color:lime; 
 }
#layer1 p {
    margin-top:0;
 }
</style>

</head>
<body>

<div id="layer1">
 <p>Hello World!</p>
</div>

</body>
</html>

Note:-
There is no need to set the div element's width to 100%, as that is it's default value.

coothead

Thread: DIV 100% stretch? Not Working Firefox?

Thread Tools

Search Thread

DIV 100% stretch? Not Working Firefox?

The Following User Says Thank You to traq For This Useful Post:

The Following 2 Users Say Thank You to coothead For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions