What are the differences between height:100% and height:inherit of CSS
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!
