CSS 높이: `100%`와 `auto`를 언제 사용해야 합니까?

CSS 높이 속성 탐색: '100%' 대 '자동'

최근 인터뷰에서 CSS 속성 '높이' 간의 차이에 관한 질문에 직면하셨습니다. : 100%' 및 '높이: 자동'. 차이점을 명확히 하기 위해 이러한 속성의 미묘한 차이를 자세히 살펴보겠습니다.

'높이: 100%'

요소의 '높이'를 100%로 설정하면 요소가 차지한다는 의미입니다. 상위 컨테이너 높이의 100%입니다. 즉, 요소는 상위 요소의 높이에 맞게 늘어납니다.

'height: auto'

반대로, 'height: auto'는 요소에 동적으로 높이를 조정할 수 있는 유연성을 제공합니다. . 이를 통해 요소는 해당 내용을 수용하는 높이를 가정할 수 있습니다. 요소의 높이는 해당 하위 요소(있는 경우)의 높이에 따라 자동으로 조정됩니다.

다음은 이러한 개념을 더욱 명확히 하기 위한 시각적 그림입니다.

'높이: 100%' 예:

<div>
<p>이 예에서 'innerDiv'의 높이는 상위 div의 높이와 동일합니다. 50px.</p>
<p>'height: auto' 예:</p>
<pre class="brush:php;toolbar:false"><div>
<p>이 예에서 'innerDiv'의 높이는 10px이며 하위 'evenInner'의 높이에 맞춰 조정됩니다. </p>
<p>'높이: 100%'를 사용하면 요소가 상위 요소를 채우도록 할 수 있습니다. height를 사용하는 반면 'height: auto'는 유연성을 제공하고 콘텐츠나 자식 요소에 맞게 요소의 높이를 조정합니다.</p>
</div>