Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Height:100% in IE7

Tags:

html

css

height

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;
}
like image 590
steventnorris Avatar asked Dec 27 '22 02:12

steventnorris


2 Answers

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%;
}
like image 176
rlemon Avatar answered Jan 17 '23 00:01

rlemon


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%; }
like image 29
Guffa Avatar answered Jan 16 '23 23:01

Guffa