Height:100% in IE7
Question by steventnorris
UPDATE
Margin for html and body needed to be 0 to fill page completely.
END UPDATE
*UPDATE*
I have fixed using the below suggestion of adding the height property to the html and body tags. Now there is a slight scroll down required to view the entire page. Ideas on why this is happening?
END UPDATE
I am using CSS to make a div fill the screen as needed. I’ve got width and height set to 100%, but the div doesn’t fill the height of the screen. Is this a known issue with IE7 or am I possibly just missing something? Code below.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="divy"></div>
</body>
</html>
CSS
#divy
{
width:100%;
height:100%;
background-color:Blue;
}
Answer by rlemon
The issues is the container must have height of 100% for it’s child element to assume 100%…
In this case the container is <html> -> <body> so a quick fix would be
html, body {
margin: 0;
padding: 0;
}
html, body, #divy {
width:100%;
height:100%;
}
Answer by Starx
Whenever you are defining a 100% height, it’s ancestors or all subsequest ancestor, must have 100% as their height as well.
So, give 100% height, to the body, as well as html.
html, body { height: 100%; }
