Оновлення у 2019 році
TL; DR: Сьогодні найкращим варіантом є останній у цій відповіді - flexbox. Все це чудово підтримує і є роками. Ідіть за цим і не озирайтеся. Решта цієї відповіді залишається з історичних причин.
Хитрість полягає в тому, щоб зрозуміти, на що береться 100%. Читання специфікацій CSS може допомогти вам там.
Якщо зробити короткий короткий опис - є таке поняття, як "містить блок" - що не є необхідним батьківським елементом. Простіше кажучи, це перший елемент вгору за ієрархією, який має положення: відносне або положення: абсолютне. Або сам елемент тіла, якщо нічого іншого немає. Отже, коли ви говорите "ширина: 100%", вона перевіряє ширину "містить блоку" і встановлює ширину вашого елемента на однаковий розмір. Якщо там було щось інше, то ви можете отримати вміст "містить блок", який є більшим, ніж він сам (таким чином "переповнюється").
Висота працює так само. За одним винятком. Ви не можете отримати висоту до 100% вікна браузера. Елементом самого верхнього рівня, проти якого можна розрахувати 100%, є елемент body (або html? Не впевнений), який розтягується достатньо, щоб містити його вміст. Вказання висоти: 100% на неї не матиме ефекту, оскільки у нього немає "батьківського елемента", проти якого можна виміряти 100%. Само вікно не рахується. ;)
Щоб щось розтягнулося рівно на 100% вікна, у вас є два варіанти:
- Використовуйте JavaScript
- Не використовуйте DOCTYPE. Це не є хорошою практикою, але вона переводить браузери в "режим диваків", в якому ви можете робити висоту = "100%" на елементах, і це розтягне їх до розміру вікна. Зверніть увагу, що решту вашої сторінки, ймовірно, доведеться також змінити, щоб відповідати змінам ДОКТОМУ.
Оновлення: Я не впевнений, чи не помилявся я вже коли публікував це, але це, безумовно, застарів. Сьогодні ви можете це зробити у своєму таблицю стилів: html, body { height: 100% }і це фактично пошириться на весь ваш огляд. Навіть з ДОКТИПОМ. min-height: 100%також може бути корисним, залежно від вашої ситуації.
І я б не радив нікому більше створювати документ у режимі химерності, оскільки це викликає набагато більше головних болів, ніж їх вирішує. У кожному веб-переглядачі є різний режим диваків, тому ускладнювати перегляд вашої сторінки у веб-переглядачах стає на два порядки складніше. Використовуйте ДОКТИП. Завжди. Переважно один HTML5 - <!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не працює на фреймів за якою - то причини. Щось із тим, щоб бути "заміненим" елементом. Але 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 - флексбокс. Найчистіший з них, але з менш зоряною підтримкою браузера. 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у цьому випадку. Це не видно в повноекранному режимі чи в редакторі фрагментів, але невелике вікно попереднього перегляду отримує додаткову панель прокрутки. Поняття не маю, що це, якщо рамки дивні.