CSS

100 % vs auto vs inherit

zakelstorm 2021. 1. 15. 09:24
728x90

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>