Compare the differences between height:100% and Height:inherit in CSS

Inherit is a good thing not only to save code, especially to deal with background, but also to maintain.

However, if you want to inherit background's picture, you cannot abbreviate it, and it will look naïve:

Background: #fff inherit left top;

You can do this:

Background-image:inherit;

Similarities and differences between height:100% and Height:inherit

1. Compatibility difference
height:100% ie6+√
Height:inherit ie8+√

2. Most of the cases are The same
remove compatibility, in most cases, the same effect, and even difficult to think of different reasons. The

① the parent container height:auto, regardless of height:100% or height:inherit performance is auto.
② parent container is set high height:100px, regardless of height:100% or height: The Inherit performance is 100px high.

Is there no difference? Is there no reason to use Height:inherit? Of course, remember, all the things happened on the river, it is no coincidence!

3. Absolute positioning is very different
when the child element is an absolute positioning element, at the same time, the parent container position value is static, hehe, height:100% and height:inherit differences can be clearly reflected!

hehe

You can ruthlessly click here: height:100% and Height:inherit diff demo

css as follows:

The code is as follows	Copy Code
. 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:

The code is as follows	Copy Code
<div class= "outer" ><div class= "height-100" ></div></div> <div class= "outer" ><div class= "Height-inherit" ></div></div>

As a result, height:100% to break through the clouds, oh, no, is the depth of the region hell:


And Height:inherit is perfect and highly adaptive. No parent element of the positioning attribute:


I don't explain why I know everything about absolute positioning.

In short, here, height:inherit powerful and useful can be seen. Back, the container height changes, inside the absolute positioning element is still highly adaptive. This is a great feature, because if the page is complex, avoiding position:relative will make you less likely to go through a lot of z-index clutter levels.