Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what are the differences between CSS's height:100% and height:inherit". In daily operation, I believe many people have doubts about the differences between CSS's height:100% and height:inherit. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the differences between CSS's height:100% and height:inherit?" Next, please follow the editor to study!

Inherit is really a good thing, not only saving code, especially dealing with people like background, but also easy to maintain.

Note that if you want to inherit background's image, you can't abbreviate it in this way, it will look naive:

CSS Code copies content to the clipboard

Background: # fff inherit left top

It can be like this:

CSS Code copies content to the clipboard

Background-image: inherit

1. Compatibility difference

Height:100% IE6+ √

Height:inherit IE8+ √

two。 In most cases, the effect is the same.

Apart from compatibility, in most cases, the effect of the two is the same, and it is even difficult to come up with different reasons.

① parent container height: auto, whether height:100% or height:inherit expression is auto.

② parent container set height height: 100px, no matter height:100% or height:inherit performance is 100px high.

Is there no difference? Is there no reason to use height:inherit? Of course, remember, everything that happens in rivers and lakes is by no means accidental!

3. Absolute positioning is very different.

When the child element is an absolute positioning element, and the position value of the parent container is static, the difference between height:100% and height:inherit can be clearly reflected!

You can click here: height:100% and height:inherit difference demo

CSS is as follows:

CSS Code copies content to the clipboard

.outer {

Display: inline-block

Height: 200px; width: 40%

Border: 5px solid # cd0000

}

.height-100 {

Position: absolute

Height: 100%; width: 200px

Background-color: # beceeb

}

. height-inherit {

Position: absolute

Height: inherit; width: 200px

Background-color: # beceeb

}

HTML is as follows:

XML/HTML Code copies content to the clipboard

As a result, height:100% broke through the sky, oh, no, deep into regional hell:

Height:inherit, on the other hand, is perfectly highly adaptive to parent elements without positioning features:

At this point, the study on "what is the difference between height:100% and height:inherit of CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.