min-height: 100%;를 설정하여 div 컨테이너가 최소한 페이지의 전체 높이를 차지하도록 만드는 방법을 찾았습니다. 그러나 중첩된 div를 추가하고 height: 100%;를 설정하면 컨테이너 높이까지 확장되지 않습니다. 이 문제를 해결할 수 있는 방법이 있나요?
html, 본문 { 높이: 100%; 여백: 0; } #방지 { 최소 높이: 100%; 배경: 분홍색; } #격리-그림자-왼쪽 { 높이: 100%; 배경: 아쿠아; } 안녕하세요 월드!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
상위 컨테이너에
height: 1px를 추가합니다. Chrome, FF 및 Safari에서 작동합니다.이것은 최소 높이를 가진 상위 요소의 하위 요소가 높이 속성을 상속할 수 없는 보고된 웹킷(chrome/safari) 버그입니다:https://bugs.webkit.org/show_bug.cgi?id=26559
Firefox도 영향을 받은 것으로 보입니다(현재 IE에서는 테스트할 수 없습니다)
가능한 해결 방법:
내부 요소에 절대 위치가 지정되면 버그가 표시되지 않습니다.
참조http://jsfiddle.net/xrebB/
2014년 4월 10일에 편집됨
현재 컨테이너 높이를 상속받는
min-height부모 및 자식 요소가 필요한 프로젝트를 진행하고 있기 때문에 좀 더 조사했습니다.우선:현재 브라우저 동작이 실제로 버그인지 더 이상 확신할 수 없습니다. CSS2.1 사양은 다음과 같습니다:
컨테이너에 최소 높이를 설정하면 높이를명시적으로지정하지 않으므로 내 요소는
auto높이를 얻어야 합니다. 이것이 바로 Webkit과 다른 모든 브라우저가 수행하는 작업입니다.두 번째로 제가 찾은 해결책:
컨테이너 요소를
display:table로 설정하고height:inherit를 사용하면display:table并使用height:inherit，它的行为与给它一个min-height为100%完全相同。而且 - 更重要的是 - 如果我将子元素设置为display:table-cell100%를 제공하는 것과 정확히 동일하게 작동합니다. 그리고 더 중요한 것은 하위 요소를display:table-cell로 설정하면 컨테이너 요소의 높이가 100% 이상이든 완벽하게 상속된다는 것입니다.전체 CSS:
으아아아태그:
으아아아http://jsfiddle.net/xrebB/54/를 참조하세요.