First of all, inherit this attribute is only supported in ie8+; 100% support IE6;
Two, most of the cases no differenceThere is no difference between height:100% and height:inherit under normal circumstances;
1. Parent element: height:auto;height:100% and inherit are also auto;
2. Parent element Fixed height: height:100px; height:100% and inherit are also 100px;
Three, absolute positioning in the case of large differencesIf the child element is an absolutely positioned element, then height:100%; The reference parent is the parent of the Location property closest to it, not the immediate parent;
But at this time Height:inherit, the reference is still the direct parent, regardless of whether the direct parent has positioning properties;
Reference demo;
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <styletype= "Text/css">. Wrap{width:300px;Height:300px;Border:5px Solid Red; }. Box{width:200px;Height:200px;Border:5px Solid Yellow; }. Child{width:100px;Height:100px;Border:5px Solid Blue; }. Margin{Top:50px; Left:50px; }. ABS{position:Absolute; }. Rel{position:relative; } </style></Head><Body> <Divclass= "Wrap"> <Divclass= "box"> <Divclass= "Child abs"></Div> </Div> </Div></Body></HTML>
The difference between height:100% and Height:inherit
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
