[CSS] height: 100% VS height: auto

[CSS] height: 100% / height: auto;

• height: 100%;

  • 부모 컨테이너의 높이를 100% 로 설정한다. (부모높이 영향)

<div style="height: 50px">
  <div id="innerDiv" style="height: 100%"></div>
</div>

#innerDiv 는 height: 50px

 

• height: auto;

  • 높이는 자식의 높이에 따라 달라진다. (자식높이 영향)

<div style="height: 50px">
  <div id="innerDiv" style="height: auto">
    <div id="evenInner" style="height: 10px"></div>
  </div>
</div>

#innerDiv는 height: 10px

 

 

Reference

https://stackoverflow.com/questions/15943009/difference-between-css-height-100-vs-height-auto