CSS 높이: `100%` 대 `auto` – 실제 차이점은 무엇입니까?

CSS height: 100%와 height: auto의 차이점 이해

CSS에서 height 속성은 요소의 세로 크기를 정의합니다. . 그러나 여기에 할당된 값은 다른 결과로 이어질 수 있습니다.

height: 100%

이 값은 요소 높이를 요소 높이의 100%로 설정합니다. 상위 컨테이너입니다. 즉, 요소는 상위 요소 내에서 사용 가능한 전체 수직 공간을 채웁니다.

height: auto

auto는 요소의 높이가 다음을 기준으로 자동으로 계산되어야 함을 나타냅니다. 콘텐츠의 크기에 따라. 이 값은 콘텐츠가 동적이고 높이가 다를 수 있는 경우에 자주 사용됩니다.

설명을 위한 예

차이점을 더 자세히 설명하려면:

예 1: 높이: 100%

<div>
<p>이 예에서 외부 div의 높이는 50px로 고정되어 있습니다. 내부 div에 height: 100%를 할당하면 상위 컨테이너의 전체 50px가 채워집니다.</p>
<p><strong>예 2: height: auto</strong></p>
<pre class="brush:php;toolbar:false"><div><p>여기서 예를 들어 외부 div의 높이는 다시 50px입니다. 내부 div에는 height:auto가 있으므로 콘텐츠에 맞게 높이를 조정합니다. 이 경우 높이가 10px인 두 번째 div입니다. 따라서 내부 div의 높이는 10px이 됩니다.</p></div>