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;
}
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%;
}
The element fills the height of the body element, which can be smaller than the browser window.
Set the height of the html
and body
elements, so that they fill the window:
html, body { height: 100%; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With