부모의 높이가 0일 때, 높이를 잡는 방법

 

이번 포스팅에서는 CSS 시 특정 요소의 부모 높이가 0이 될 때, 그 부모의 높이를 잡는 방법에 대해 알아보겠습니다.

부모의 높이가 0이 될 경우, 별문제가 되지 않는 경우도 있지만 대부분의 경우, 뒤 영역이 앞 영역을 타고 올라오는 등 UI 레이아웃이 깨지는 현상이 있어 문제가 됩니다. 이를 해결하기 위한 방법을 함께 알아보겠습니다.

 

1. 부모의 높이가 0이 되는 원인

1.1. float 속성 사용

자식 요소에게 float 속성을 부여한 것이 가장 대표적인 원인입니다. 최근에는 display: flexbox, grid 등의 레이아웃 관련 CSS 속성이 추가되어 float 속성을 이용해 레이아웃을 잡는 일이 적어졌는데요. 그렇지만 기존 사이트를 유지보수 하거나, 새로운 사이트를 구축할 때도 float 속성을 사용할 일이 가끔 생깁니다. 이럴 때 부모의 높이가 잡히지 않는 현상을 해결하기 위해선 아래 해결 방법 중 CSS를 이용한 방법을 이용하면 손쉽게 해결이 가능합니다.

1.2. position: absolute 사용

자식 요소에게 position: absolute 속성을 부여하는 것 또한 대표적 원인 중 하나입니다. 앞서 언급한 float 속성과 position: absolute의 공통점은 이 속성이 부요한 요소를 공중으로 띄운다는 점입니다. (물리적으로 떠있다기보다 CSS 개념을 설명하기 위한 비유입니다.) absolute를 사용한 경우에는 JS를 이용한 해결 방법이 좋은 해결 방법이 될 수 있습니다. (CSS를 이용하는 방법은 대부분 float를 위한 방법이기 때문)

 

2. 해결 방법 - CSS 이용

2.1. 직접 height 값을 지정해 준다.

• 자식 요소의 높이만큼 부모 요소에게 직접 높이 지정
• 플렉서블(flexable)하지 못하기 때문에 좋은 UI는 아님

2.2. 부모 요소에게 overflow: hidden 혹은 auto를 준다.

• 자식 요소가 float 일 경우에만 가능 (absolute일 때는 잡아주지 못함)
• hidden을 사용할 경우, 내부의 다른 자식을 absolute 하여 자리를 잡는 등의 다른 작업을 할 때, 작업 요소가 보이지 않아 곤란을 겪게 될 수 있으니 이 점에 주의해야 함

2.3. clearfix 이용

• 자식 요소가 float 일 경우에만 가능
• 부모(parentElement)에게 가상 셀렉터 :after를 주고 다음과 같이 CSS를 준다.

parentElement:after {content: ''; display: block; clear: both;}

 

3. 해결 방법 - JS 이용

본 문제점을 해결할 때 CSS만으로는 해결이 불가능한 경우가 있습니다. 자식 요소가 absolute이면서 항상 크기가 유동적으로 변하는 경우가 그러하죠. 이런 경우 JS, 즉 JavaScript를 이용해 자식 요소의 높이를 계산하여 부모 요소에게 부여해 주는 방법을 사용할 수 있습니다. 그 방법은 아래에서 소개하겠습니다.

3.1. JavaScript 이용

// JavaScript를 사용하여 부모 요소의 높이를 자식 요소의 높이로 설정
var 부모요소 = document.getElementById('부모요소');
var 자식요소 = document.getElementById('자식요소');
var 자식높이 = 자식요소.clientHeight;

부모요소.style.height = 자식높이 + 'px';

3.2. jQuery 이용

// jQuery를 사용하여 부모 요소의 높이를 자식 요소의 높이로 설정
var 자식높이 = $('.자식요소').height();
$('.부모요소').height(자식높이);

 

 

이번 포스팅을 통해 부모 요소의 높이가 0으로 설정되어 있는 상황에서 CSS와 JavaScript를 활용하여 이 문제를 해결하는 방법에 대해 자세히 알아보았습니다.

도움이 되셨길 바랍니다.

 

감사합니다.