CSS 높이: 100% 대 높이: 자동 간의 차이

CSS 높이: 100% 대 높이: 자동 간의 차이

저는 인터뷰에서 "CSS의 차이점은 무엇입니까?"라는 질문을 받았습니다.height:100%그리고.height:auto?"

누가 설명해 줄 수 있나요?

height: 100%요소에 상위 컨테이너의 높이를 100% 제공합니다.

height: auto요소 높이가 자식의 키에 따라 달라진다는 의미입니다.

다음 예를 고려해 보십시오.

높이: 100%

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

#innerDiv을 가질 것입니다.height: 50px

높이: 자동

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

#innerDiv을 가질 것입니다.height: 10px

100%의 높이는 브라우저의 내부 창의 높이입니다. 브라우저의 내부 창의 높이가 상위 페이지의 높이이기 때문입니다.높이는 포함하는 데 필요한 최소 높이입니다.

높이:100% 작동합니다. 상위 컨테이너에 지정된 높이 속성이 없으면 작동하지 않습니다.

기본값은height: auto브라우저에서, 그러나height: X%포함하는 블록의 높이를 백분율로 정의합니다.

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