100 % vs auto vs inherit

100%

• gives the element 100% height of its parent container.#innerDiv is going to have height: 50px
• <div style="height: 50px"> <div id="innerDiv" style="height: 100%"></div> </div>

auto

• means the element height will depend upon the height of its children.#innerDiv is going to have height: 10px
• <div style="height: 50px"> <div id="innerDiv" style="height: auto"> <div id="evenInner" style="height: 10px"></div> </div> </div>

inherit

• inherit the height value from it's parent.
  • absolute value inherit#innerDiv is going to have height: 50px;
  • <div style="height: 50px"> <div id="innerDiv" style="height: inherit"> <div id="evenInner" style="height: 10px"> </div> </div> </div>
  • relative value inherit#innerDiv is going to have height : 50%; (= 25% of page height)
  • <div style="height: 50%"> <div id="innerDiv" style="height: inherit"> <div id="evenInner" style="height: 10px"> </div> </div> </div>