Cập nhật năm 2019
TL; DR: Hôm nay, tùy chọn tốt nhất là lựa chọn cuối cùng trong câu trả lời này - flexbox. Tất cả mọi thứ hỗ trợ nó độc đáo và có trong nhiều năm. Đi cho điều đó và không nhìn lại. Phần còn lại của câu trả lời này được để lại vì lý do lịch sử.
Bí quyết là để hiểu những gì 100% được thực hiện. Đọc thông số kỹ thuật CSS có thể giúp bạn ở đó.
Để làm cho một câu chuyện dài ngắn - có một thứ gọi là "khối chứa" - không cần thiết là phần tử cha. Nói một cách đơn giản, đây là yếu tố đầu tiên trong hệ thống phân cấp có vị trí: tương đối hoặc vị trí: tuyệt đối. Hoặc chính yếu tố cơ thể nếu không có gì khác. Vì vậy, khi bạn nói "width: 100%", nó sẽ kiểm tra độ rộng của "khối chứa" và đặt chiều rộng của phần tử của bạn thành cùng kích thước. Nếu có một cái gì đó khác ở đó, thì bạn có thể nhận được nội dung của một "khối chứa" lớn hơn chính nó (do đó "tràn ra").
Chiều cao hoạt động theo cùng một cách. Với một ngoại lệ. Bạn không thể lấy chiều cao tới 100% cửa sổ trình duyệt. Phần tử mức cao nhất, dựa vào đó 100% có thể được tính toán, là phần tử phần thân (hoặc html? Không chắc chắn) và phần đó chỉ đủ để chứa nội dung của nó. Chỉ định chiều cao: 100% trên đó sẽ không có hiệu lực, bởi vì nó không có "phần tử cha" để đo 100%. Cửa sổ tự nó không tính. ;)
Để làm cho một cái gì đó kéo dài chính xác 100% của cửa sổ, bạn có hai lựa chọn:
- Sử dụng JavaScript
- Đừng sử dụng DOCTYPE. Đây không phải là một cách thực hành tốt, nhưng nó đặt các trình duyệt ở chế độ "quirks", trong đó bạn có thể thực hiện height = "100%" trên các phần tử và nó sẽ kéo dài chúng đến kích thước cửa sổ. Xin lưu ý rằng phần còn lại của trang của bạn có thể sẽ phải được thay đổi để phù hợp với các thay đổi của DOCTYPE.
Cập nhật: Tôi không chắc là tôi đã sai khi tôi đăng bài này chưa, nhưng điều này chắc chắn đã lỗi thời. Hôm nay bạn có thể làm điều này trong biểu định kiểu của mình: html, body { height: 100% }và nó thực sự sẽ kéo dài đến toàn bộ khung nhìn của bạn. Ngay cả với một DOCTYPE. min-height: 100%cũng có thể hữu ích, tùy thuộc vào tình huống của bạn.
Và tôi sẽ không khuyên bất cứ ai làm một tài liệu chế độ kỳ quặc nữa, bởi vì nó gây ra nhiều vấn đề đau đầu hơn là giải quyết chúng. Mỗi trình duyệt có một chế độ kỳ quặc khác nhau, do đó, việc để trang của bạn trông ổn định trên các trình duyệt trở nên khó khăn hơn. Sử dụng một DOCTYPE. Luôn luôn. Tốt nhất là HTML5 - <!DOCTYPE html>. Thật dễ nhớ và hoạt động như một bùa mê trong tất cả các trình duyệt, ngay cả những trình duyệt 10 tuổi.
Ngoại lệ duy nhất là khi bạn phải hỗ trợ một cái gì đó như IE5 hoặc một cái gì đó. Nếu bạn ở đó, thì dù sao bạn cũng tự mình làm. Những trình duyệt cổ xưa đó không giống với các trình duyệt ngày nay, và những lời khuyên nhỏ được đưa ra ở đây sẽ giúp bạn với chúng. Về mặt sáng sủa, nếu bạn ở đó, có lẽ bạn chỉ cần hỗ trợ MỘT loại trình duyệt, loại bỏ các vấn đề tương thích.
Chúc may mắn!
Cập nhật 2: Này, đã lâu rồi! 6 năm sau, những lựa chọn mới đã xuất hiện. Tôi vừa có một cuộc thảo luận trong các ý kiến dưới đây, đây là nhiều thủ thuật cho bạn làm việc trong các trình duyệt ngày nay.
Tùy chọn 1 - định vị tuyệt đối. Đẹp và sạch sẽ khi bạn biết chiều cao chính xác của phần đầu tiên.
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>
Một số lưu ý - bộ second-rowchứa là cần thiết bởi vì bottom: 0và right: 0không hoạt động trên iframe vì một số lý do. Một cái gì đó để làm với việc là một yếu tố "thay thế". Nhưng width: 100%và height: 100%hoạt động tốt. display: blocklà cần thiết bởi vì nó là mộtinline yếu tố theo mặc định và khoảng trắng bắt đầu tạo ra các luồng tràn lạ.
Tùy chọn 2 - bảng. Hoạt động khi bạn không biết chiều cao của phần đầu tiên. Bạn có thể sử dụng <table>các thẻ thực tế hoặc làm theo cách ưa thích với display: table. Tôi sẽ đi sau vì nó dường như là thời trang ngày nay.
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>
Một số lưu ý - overflow: autođảm bảo rằng hàng luôn bao gồm tất cả các nội dung của nó. Nếu không các yếu tố nổi đôi khi có thể tràn. Cácheight: 100% thứ hai đảm bảo nó mở rộng hết mức có thể ép hàng thứ nhất nhỏ nhất có thể.
Tùy chọn 3 - hộp linh hoạt. Một trong số tất cả trong số đó, nhưng với sự hỗ trợ ít hơn so với trình duyệt. IE10 sẽ cần -ms-tiền tố cho các thuộc tính flexbox và mọi thứ ít hơn sẽ không hỗ trợ nó.
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>
Một số lưu ý - đó overflow: hiddenlà vì iframe vẫn tạo ra một số loại tràn ngay cả display: blocktrong trường hợp này. Nó không hiển thị trong chế độ xem toàn màn hình hoặc trình chỉnh sửa đoạn trích, nhưng cửa sổ xem trước nhỏ sẽ có thêm một thanh cuộn. Không biết đó là gì, iframe là lạ.