2019 년 업데이트
TL; DR : 오늘날 가장 좋은 옵션은이 답변의 마지막 옵션 인 flexbox입니다. 모든 것이 그것을 잘 지원하고 수년간 가지고 있습니다. 그것을 위해 가서 뒤돌아 보지 마십시오. 이 답변의 나머지 부분은 역사적 이유로 남아 있습니다.
비결은 100 %가 무엇을 취했는지 이해하는 것입니다. CSS 사양을 읽으면 도움이 될 수 있습니다.
간단히 말해서 "블록 포함"과 같은 것이 부모 요소에는 필요하지 않습니다. 간단히 말해서, position : relative 또는 position : absolute가있는 계층 구조의 첫 번째 요소입니다. 또는 다른 것이 없다면 body 요소 자체. 따라서 "너비 : 100 %"라고 말하면 "포함 블록"의 너비를 확인하고 요소의 너비를 같은 크기로 설정합니다. 거기에 다른 것이 있으면 그 자체보다 더 큰 "포함 블록"의 내용을 얻을 수 있습니다 (따라서 "오버플로").
높이도 같은 방식으로 작동합니다. 한 가지 예외가 있습니다. 브라우저 창의 높이를 100 %까지 높일 수 없습니다. 100 %를 계산할 수있는 최상위 요소는 body (또는 html? 확실하지 않은) 요소이며 내용을 포함 할만큼 확장됩니다. 높이 : 100 %를 지정하면 100 %를 측정 할 "부모 요소"가 없으므로 효과가 없습니다. 창 자체는 계산되지 않습니다. ;)
창을 정확히 100 % 늘리려면 두 가지 중에서 선택할 수 있습니다.
- 자바 스크립트 사용
- DOCTYPE을 사용하지 마십시오. 이 방법은 좋지 않지만 브라우저를 "쿼크 모드"로 설정하면 요소에 대해 height = "100 %"를 수행 할 수 있으며이를 창 크기로 확장합니다. DOCTYPE 변경에 맞게 페이지의 나머지 부분도 변경해야합니다.
업데이트 : 이 게시물을 올릴 때 이미 틀리지 않았는지 확실하지 않지만 지금은 구식입니다. 오늘 스타일 시트에서이 작업을 수행 할 수 있습니다. html, body { height: 100% }실제로는 전체 뷰포트로 확장됩니다. DOCTYPE에서도 마찬가지입니다. min-height: 100%상황에 따라 유용 할 수도 있습니다.
그리고 나는 더 이상 멍청이 모드 문서를 만들 것을 권하지 않습니다 . 왜냐하면 문제를 해결하는 것보다 두통이 더 많기 때문입니다. 모든 브라우저마다 서로 다른 쿼크 모드가 있으므로 브라우저에서 페이지를 일관되게 표시하는 것이 2 배 더 어려워집니다. DOCTYPE을 사용하십시오. 항상. 바람직하게는 HTML5 one- <!DOCTYPE html>. 기억하기 쉽고 모든 브라우저, 심지어 10 살짜리 브라우저에서도 매력처럼 작동합니다.
유일한 예외는 IE5와 같은 것을 지원해야 할 때입니다. 당신이 거기 있다면, 당신은 어쨌든 자신에 있습니다. 이 고대 브라우저는 오늘날의 브라우저와는 다르며 여기에 제공된 약간의 조언만으로도 도움이 될 것입니다. 밝은면에서, 거기에 있다면 호환성 문제를 제거하는 한 종류의 브라우저를 지원해야 할 것입니다.
행운을 빕니다!
업데이트 2 : 이봐, 오랜만이야! 6 년 후, 새로운 옵션이 등장했습니다. 방금 아래 의견에 대해 토론했습니다. 오늘날 브라우저에서 작동하는 더 많은 트릭이 있습니다.
옵션 1- 절대 위치. 첫 번째 부분의 정확한 높이를 알면 멋지고 깨끗합니다.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
일부두기 - second-row때문에 용기가 필요 bottom: 0하고 right: 0어떤 이유로 iframe을 작업을하지 않습니다. "대체 된"요소가되는 것과 관련이 있습니다. 그러나 width: 100%와 height: 100%잘 작동합니다. 기본적으로 요소 display: block이므로 inline공백이 없으면 이상한 오버플로가 발생하기 시작합니다.
옵션 2- 테이블. 첫 번째 부분의 높이를 모르는 경우 작동합니다. 실제 <table>태그를 사용하거나로 멋진 방법으로 할 수 display: table있습니다. 요즘 유행하는 것 같아 후자를 위해 갈 것입니다.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
</div>
일부 참고 사항- overflow: auto행에 항상 내용이 모두 포함되어 있는지 확인하십시오. 그렇지 않으면 플로팅 요소가 오버플로 될 수 있습니다. height: 100%두 번째 행에는수록이 작게 첫 번째 행을 압박 할만큼 확인이 확장합니다.
옵션 3 -flexbox. 가장 깨끗하지만 브라우저 지원이 적습니다. IE10은 -ms-flexbox 속성에 대한 접두사 가 필요 하며 그보다 적은 것은 전혀 지원하지 않습니다.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
일부 참고 사항- 이 경우 overflow: hidden에도 iframe은 여전히 일종의 오버플로를 생성하기 때문 display: block입니다. 전체 화면보기 또는 스 니펫 편집기에는 표시되지 않지만 작은 미리보기 창에는 추가 스크롤 막대가 표시됩니다. 그게 뭔지 모르겠지만, iframe은 이상합니다.