Log in

View Full Version : 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

<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 :mad:.

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:
#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. :eek:

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...


<!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