Pembaruan pada tahun 2019
TL; DR: Hari ini pilihan terbaik adalah yang terakhir dalam jawaban ini - flexbox. Semuanya mendukungnya dengan baik dan telah bertahun-tahun. Pergi untuk itu dan jangan melihat ke belakang. Sisa jawaban ini dibiarkan karena alasan historis.
Kuncinya adalah memahami apa yang 100% diambil. Membaca spesifikasi CSS dapat membantu Anda di sana.
Untuk membuat cerita panjang pendek - ada yang namanya "mengandung blok" - yang tidak perlu elemen induk. Sederhananya, itu adalah elemen pertama hingga hierarki yang memiliki posisi: relatif atau posisi: absolut. Atau elemen tubuh itu sendiri jika tidak ada yang lain. Jadi, ketika Anda mengatakan "lebar: 100%", itu memeriksa lebar "blok yang mengandung" dan mengatur lebar elemen Anda ke ukuran yang sama. Jika ada sesuatu yang lain di sana, maka Anda mungkin mendapatkan konten dari "blok berisi" yang lebih besar dari itu sendiri (dengan demikian "meluap").
Tinggi bekerja dengan cara yang sama. Dengan satu pengecualian. Anda tidak bisa mendapatkan tinggi hingga 100% dari jendela browser. Elemen level paling atas, yang bisa dihitung 100%, adalah elemen body (atau html? Tidak yakin), dan yang membentang cukup untuk memuat isinya. Menentukan tinggi: 100% di atasnya tidak akan berpengaruh, karena tidak memiliki "elemen induk" untuk mengukur 100%. Jendela itu sendiri tidak masuk hitungan. ;)
Untuk membuat peregangan sesuatu persis 100% dari jendela, Anda memiliki dua pilihan:
- Gunakan JavaScript
- Jangan gunakan DOCTYPE. Ini bukan praktik yang baik, tetapi menempatkan browser dalam "mode quirks", di mana Anda dapat melakukan tinggi = "100%" pada elemen dan itu akan meregangkan mereka ke ukuran jendela. Perhatikan, bahwa sisa halaman Anda mungkin harus diubah juga untuk mengakomodasi perubahan DOCTYPE.
Pembaruan: Saya tidak yakin apakah saya sudah salah ketika saya memposting ini, tetapi ini sudah usang sekarang. Hari ini Anda bisa melakukan ini di stylesheet Anda: html, body { height: 100% }dan itu benar-benar akan merentang ke seluruh viewport Anda. Bahkan dengan DOCTYPE. min-height: 100%bisa juga bermanfaat, tergantung situasi Anda.
Dan saya tidak akan menyarankan siapa pun untuk membuat dokumen quirks-mode lagi, karena itu menyebabkan lebih banyak sakit kepala daripada menyelesaikannya. Setiap browser memiliki mode quirks yang berbeda, sehingga membuat halaman Anda terlihat secara konsisten di seluruh browser menjadi lebih sulit. Gunakan DOCTYPE. Selalu. Lebih disukai yang HTML5 - <!DOCTYPE html>. Mudah diingat dan berfungsi seperti pesona di semua browser, bahkan yang berusia 10 tahun.
Satu-satunya pengecualian adalah ketika Anda harus mendukung sesuatu seperti IE5 atau sesuatu. Jika Anda ada di sana, berarti Anda sendirian. Browser kuno itu tidak seperti browser saat ini, dan sedikit saran yang diberikan di sini akan membantu Anda. Sisi baiknya, jika Anda di sana, Anda mungkin hanya perlu mendukung SATU jenis browser, yang menghilangkan masalah kompatibilitas.
Semoga berhasil!
Pembaruan 2: Hei, sudah lama! 6 tahun kemudian, opsi baru muncul. Saya baru saja berdiskusi dalam komentar di bawah ini, berikut adalah lebih banyak trik untuk Anda yang berfungsi di peramban hari ini.
Opsi 1 - penentuan posisi absolut. Bagus dan bersih ketika Anda tahu ketinggian yang tepat dari bagian pertama.
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>
Beberapa catatan - second-rowwadah diperlukan karena bottom: 0dan right: 0tidak berfungsi pada iframe karena alasan tertentu. Ada hubungannya dengan menjadi elemen "diganti". Tapi width: 100%dan height: 100%berfungsi dengan baik. display: blockdiperlukan karena itu adalah inlineelemen secara default dan spasi putih mulai membuat aliran aneh sebaliknya.
Opsi 2 - tabel. Bekerja ketika Anda tidak tahu ketinggian bagian pertama. Anda dapat menggunakan <table>tag aktual atau melakukannya dengan cara mewah display: table. Saya akan memilih yang terakhir karena sepertinya sedang mode akhir-akhir ini.
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>
Beberapa catatan - overflow: automemastikan bahwa baris selalu menyertakan semua isinya. Kalau tidak, elemen apung terkadang bisa meluap. Yang height: 100%di baris kedua memastikan itu mengembang sebanyak yang bisa meremas baris pertama sekecil itu.
Opsi 3 - flexbox. Yang terbersih dari semuanya, tetapi dengan dukungan browser yang kurang dari bintang. IE10 akan membutuhkan -ms-awalan untuk properti flexbox, dan apa pun yang kurang tidak akan mendukung sama sekali.
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>
Beberapa catatan - overflow: hiddenini karena iframe masih menghasilkan semacam overflow bahkan display: blockdalam kasus ini. Itu tidak terlihat dalam tampilan layar penuh atau editor cuplikan, tetapi jendela pratinjau kecil mendapat bilah gulir tambahan. Tidak tahu apa itu, iframe itu aneh.