About height:100%二三事_html/css_WEB-ITnose-HTML Tutorial-php.cn

About height:100%二三事_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:01:12

Original

1098 people have browsed it

For CSS height:100%, as the name suggests, the height of the element is automatically filled with the height of its parent element. But this style sometimes doesn't work, Mark down. ><

First, take a look at the following CSS code:

1 div {2     height: 100%;3 }

Copy after login

HTML code:

1 <!doctype html>2 <html>3 <head></head>4 <body>5     <p>我的名字叫做甲基苯醌</p>6     <div></div>7 </body>8 </html>

Copy after login

There is no doubt that the height of div: 100% does not work at all (luckily I naively thought that the height of div would be the same as the height of p, because the height of the body is stretched by p, and then 100% works, Haha, too young too simple), and looking back now, height: 100% does not work, it is completely logical. Because the height of the body element is adaptive without setting the height. If the height:100% of the div takes effect, the height of the body will definitely be stretched. At this time, the height of the body === div Height * 2, and the div style is height:100%, which is completely inconsistent with our country’s scientific outlook on development! ! !

To solve this problem is also very simple, add the following CSS code:

1 htm, body {2     height: 100%;3 }

Copy after login

And so on, when the element is not absolute and fixed, you need to height:100% works, then the height of the element's parent element must be set.

So, now the question is, why does the height: 100% of its child elements take effect when the parent element sets height?

Obviously, after the height of the parent element is set, its height is a fixed value. Even if a child element is set to height:100%, its height will not increase. Moreover, the browser does not control the overflow of the element. The default value is visible, so that works.

Next, when the child element is set to absolute positioning, even if the parent element does not set a height, the height:100% of the child element will work, because the absolutely positioned child element will not stretch the parent element. The height and width are in line with the scientific concept of development! ! ! !

Everyone who has done responsive layout knows that I want the height of a certain div to change with the size of the screen, but I also want this div to have some margin or padding effect. After the div is absolutely positioned, set height:100%, there will be some messy problems when setting margin or padding. The solution can be achieved with the following code. . . .

1 div {2     position: absolute;3     height: auto;4     left: 0;5     top: 0;6     right: 0;7     bottom: 0;8     margin: 20px;9 }

Copy after login