Обновление в 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 - флексбокс. Самый чистый из них, но с менее чем звездной поддержкой браузера. 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в этом случае. Он не виден в полноэкранном режиме или в редакторе фрагментов, но небольшое окно предварительного просмотра получает дополнительную полосу прокрутки. Понятия не имею, что это такое, фреймы странные.