Set the Div width and height to 100%

As you know, setting the DIV size has two attributes: width and height. In the past, it was confusing to learn how to set the DIV width or height every time, it is not clear how high is the width (height) of this 100%? Where does this 100% get the inheritance from? Today, our topic is about div height 100%!

In fact, to understand the div width | width100 % and div height | height100 %, you only need to understand a simple question, that is, who is the base of 100%, that is, Which of the following is 100% relative to the width and height?

The 100% of a div is inherited from the width and height of its upper-level div. The key is to set div100 % to display. The width or height of the upper-level div must be set; otherwise, the div is ineffective. For example, if the parent div (deman) is 300 wide and 200 high, and the Sub div (cc) is set to 100% wide and high under this condition, the exact size of cc is the size of the parent div (300 in width and 200 in height). During the attempt, you will find that the div display is affected by the padding and margin of itself and its upper-level div, however, the actual width and height are not affected. Fun!

If you set the div height to 100%, where is it relative to 100%?

There must be a container to show the height. In this way, the div can inherit the height of the upper level by a proportion of 100%. Unfortunately, browsers generally interpret the height of content by default, rather than 100%. However, you only need to set the height of html and body to 100%: html, body {height: 100% ;}. in this way, the div inherits the height of the previous level proportionally, the height attribute of the DIV element does not seem to have any effect.

At the same time, it is gratifying that the css style set in this way does not have browser compatibility problems, and can be normally displayed in IE5.5, IE6, IE7, IE8, and Firefox.

You can set the Div to fill the whole page with the following style:

<Style type = "text/css">
Html
{
Height: 100%;
Margin: 0;
}
Body
{
Height: 100%;
Margin: 0;
}
</Style>

<Div style = "width: 100%; height: 100%; background-color: #666; z-index: 1">
</Div>

One thing to note is that the default width of Html-level elements is 100%, that is, the whole row. However, the height is not 100%, but only one row.

Therefore, to fully support the entire page, you must explicitly set the height to 100%!