높이:100%와 높이:자동의 차이점은 무엇인가요?

height:100%와 height:auto의 차이점을 전혀 이해하지 못했습니다. 최근에는 프런트 엔드 페이지를 만들 때 height:100%;overflow:hidden;을 사용했지만 일부 브라우저에는 설명할 수 없는 놀라운 문제가 있습니다. height :auto로 변경하면 문제가 없습니다. Baidu는 이 문제를 자세히 조사한 적이 없습니다.

오늘도 같은 문제가 발생했습니다. 바이두를 자세히 살펴보고 그룹 친구들의 조언을 듣고 드디어 이유를 파악하고 녹음했습니다.

height:auto는 블록의 내용에 따라 높이를 자동으로 조정하는 것을 의미합니다.
높이: 100%는 상위 블록의 높이를 기준으로 정의된 높이를 나타냅니다. 즉, 높이는 정의된 높이와 가장 가까운 상위 레이어의 높이에 따라 정의됩니다.

콘텐츠의 높이에 따라 자동으로 확장됩니다. 100%는 상위 요소의 높이를 기준으로 결정됩니다. 예:

<div style="height:100px;width:200px;">      <div style="height:auto;width:100px;float:left;">
这个容器的高度是随里面的内容的高度而定
</div>

<div style="height:100%;width:100px;float:right;">这个容器的高度为父级的高度，100px</div> </div>

예를 들어, 외부 테이블의 높이가 100이고 내부 테이블이 자동인 경우 테이블에 아무것도 없으면 높이가 없습니다. 테이블 안의 내용물이 얼마나 높느냐에 따라 다르며, 100%이면 안에 내용물이 있든 없든 바깥 테이블과 같은 높이가 됩니다

위 내용은 높이:100%와 높이:자동의 차이점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!