100% setting of Div width and height in css_html/css_WEB-ITnose

As you know, there are two attributes, width and height, for setting the size of a DIV. In the past, when I was learning DIV, it was very confusing and unclear every time I set the 100% width or height of the DIV. How wide and tall is this 100% width (height)? Where did you get this 100%? Where did you inherit it? Today our topic is about the 100% height of div!

In fact, to understand how div width|width100% and div height|height100% are implemented, you only need to understand a simple question, that is, who is the base of 100%? This is it. 100% is 100% relative to whose width and height it is?

100% of a div is inherited from the width and height of its upper-level div. One key point is that to set 100% display of a div, you must set the width or height of its upper-level div, otherwise it will be invalid. . For example: the parent div (deman) is 300 in width and 200 in height, and the child div (cc) is set to 100% in width and height, then the exact size of cc is the size of the parent div (300 in width and 200 in height). , during the experiment, you will find that the div display will be affected by the padding and margin of itself and its upper-level div, but its actual width and height will not be affected. Worth pondering!

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

There must be a container in front of it to indicate its height. In this case, the div can inherit 100% of the height of the previous level proportionally. Unfortunately, browsers generally default to interpreting it as the height of the content, rather than 100%. But just set the height to 100% for html and body: html, body {height: 100%;}. In this way, the div will inherit the height of the previous level in proportion. Just set the height attribute of the DIV element. It looks like Nothing works.

At the same time, what is gratifying is that the CSS style set in this way has no browser compatibility issues and can be displayed normally in IE5.5, IE6, IE7, IE8 and Firefox.

Then, the following style can be used to set the Div to fill the entire page:

One thing to note is that the default width of Html-level elements is 100%, that is, the entire line; but the height is not 100%, but only one line.

So if you want to fill the entire page, you must explicitly set the height to 100%!