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

Today, I would like to share with you the relevant knowledge of what is the difference between the use of height:100% and height:inherit in CSS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

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

On the other hand, the height:inherit is perfectly highly adaptive to the parent elements without positioning characteristics.

Anyone who knows something about absolute positioning should know why, so I won't explain it.

In short, here, the strength and ease of use of height:inherit can be seen. Looking back, the height of the container has changed, and the absolute positioning elements inside are still highly adaptive. This is a great feature, because if the page is complex, avoiding position: relative will save you a lot of the hassle of z-index clutter coverage.

This is all the content of the article "what is the difference between height:100% and height:inherit in CSS?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.