Web programming/html&css

[css] parent의 높이를 child의 높이에 맞추기

annual 2018. 7. 29. 20:07 


<body>
  <div id="parent">
    <div id="childRightCol">
      /*Content*/
    </div>
    <div id="childLeftCol">
      /*Content*/
    </div>
  </div>
</body>


위와 같은 예제에서 child의 height이 커지면 parent의 height도 따라서 커지게 하고 싶은 경우가 있을 것이다.


이 때 parent의 style에

overflow:auto;

를 추가해주면 된다.


한 가지 방법이 더 있는데

Parent:

display: table;

Child:

display: table-row;


이렇게 각각 스타일을 지정해주면 된다.



출처: https://stackoverflow.com/questions/384145/expanding-a-parent-div-to-the-height-of-its-children