Обновление в 2019
TL; DR: На сегодняшний день лучший вариант ответа - последний в этом ответе - flexbox. Все это поддерживает хорошо и уже много лет. Сделай это и не оглядывайся назад. Остальная часть этого ответа оставлена по историческим причинам.
Хитрость в том, чтобы понять, из чего взят 100%. В этом вам может помочь чтение спецификаций CSS.
Короче говоря, существует такая вещь, как "содержащий блок", который не является обязательным для родительского элемента. Проще говоря, это первый элемент иерархии, который имеет положение: относительное или положение: абсолютное. Или сам элемент тела, если больше ничего нет. Поэтому, когда вы говорите «width: 100%», он проверяет ширину «содержащего блока» и устанавливает ширину вашего элемента равным размеру. Если там было что-то еще, то вы могли бы получить содержимое «содержащего блока», которое больше его самого (таким образом, «переполнено»).
Высота работает так же. За одним исключением. Вы не можете получить высоту до 100% окна браузера. Элементом самого верхнего уровня, по которому можно рассчитать 100%, является элемент body (или html? Not sure), который растягивается настолько, чтобы вместить его содержимое. Указание высоты: 100% для него не будет иметь никакого эффекта, потому что у него нет «родительского элемента», для которого можно измерить 100%. Само окно не считается. ;)
Чтобы растянуть что-то точно на 100% окна, у вас есть два варианта:
- Использовать JavaScript
- Не используйте DOCTYPE. Это не очень хорошая практика, но это переводит браузеры в «режим причуд», в котором вы можете сделать height = «100%» для элементов, и он растянет их до размера окна. Обратите внимание, что остальная часть вашей страницы, вероятно, также должна быть изменена, чтобы соответствовать изменениям DOCTYPE.
Обновление: Я не уверен, не ошибся ли я уже, когда отправил это, но это, безусловно, устарело. Сегодня вы можете сделать это в своей таблице стилей: html, body { height: 100% }, и она будет фактически распространяться на всю область просмотра. Даже с DOCTYPE. min-height: 100% также может быть полезно, в зависимости от вашей ситуации.
И я больше никому не посоветовал бы сделать документ в режиме причуд , потому что это вызывает гораздо больше головных болей, чем решает их. В каждом браузере есть свой причудливый режим, поэтому заставить вашу страницу выглядеть одинаково во всех браузерах на два порядка сложнее. Используйте DOCTYPE. Всегда. Желательно 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 - 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. Он не отображается в полноэкранном режиме или в редакторе фрагментов, но в небольшом окне предварительного просмотра появляется дополнительная полоса прокрутки. Понятия не имею, что это, если фреймы странные.