Сделайте Iframe для установки 100% остающейся высоты контейнера
9 ответов
Обновите в 2019
TL; DR: Сегодня наилучшим вариантом является последний в этом ответе - flexbox. Все поддерживает его приятно и имеет в течение многих лет. Пойдите для этого и не оглядывайтесь назад. Остальная часть этого ответа оставлена по историческим причинам.
<час>прием должен понять то, из чего 100% взят. Чтение спецификаций CSS может помочь Вам там.
, Короче говоря - существует такая вещь как "содержащий блок" - который не необходим родительский элемент. Просто сказанный, это - первый элемент иерархия, которая имеет position:relative или position:absolute. Или сам элемент тела, если нет ничего иного. Так, когда Вы говорите "ширину: 100%", это проверяет ширину "содержащий блок" и устанавливает ширину Вашего элемента к тому же размеру. Если бы было что-то еще там, то Вы могли бы получить содержание "содержащий блок", которые больше, чем себя (таким образом "переполняющийся").
Высота работает тот же путь. За одним исключением. Вы не можете получить высоту к 100% окна браузера. Очень высокоуровневый элемент, против которого могут быть вычислены 100%, является телом (или HTML? не уверенный), элемент, и это простирается как раз для содержания его содержания. Определение height:100% на нем не будет иметь никакого эффекта, потому что это не имеет никакого "родительского элемента", против которого можно измерить 100%. Само окно не рассчитывает.;)
, Чтобы заставить что-то расширить точно 100% окна, у Вас есть два варианта:
- JavaScript
- Использования не используют DOCTYPE. Это не хорошая практика, но она помещает браузеры в "режим причуд", в котором можно сделать высоту = "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 не работает над iframes по некоторым причинам. Что-то, чтобы сделать с в том, чтобы быть "замененным" элементом. Но width: 100% и height: 100% работает просто великолепно. display: block необходим, потому что это inline, элемент по умолчанию и пробел начинают создавать странное переполнение иначе.
Опция 2 - таблицы. Работы, когда Вы не знаете высоты первой части. Можно использовать или фактический <table> теги или сделать это необычный путь с [1 117]. Я пойду для последнего, потому что это, кажется, в моде в эти дни.
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 все еще генерирует своего рода переполнение даже с [1 122] в этом случае. Это не видимо в полноэкранном представлении или редакторе отрывка, но маленькое окно предварительного просмотра получает дополнительную полосу прокрутки. Никакая идея, что то есть, iframes являются странными.
Можно сделать, это путем измерения размера тела на загружает/изменяет размеры события и установку высоты к (полная высота - высота баннера).
Примечание, что в настоящее время в IE8 Beta2 Вы не можете сделать этого onresize как того события, в настоящее время повреждается в IE8 Beta2.
Я думаю, что у Вас есть концептуальная проблема здесь. Для высказывания , "Я попробовал набор height:100% на iframe, результат довольно близок, но iframe пытался заполнить целую страницу" , ну, в общем, когда "100%" не были равны "целому"?
Вы попросили, чтобы iframe заполнил всю высоту своего контейнера (который является телом), но к сожалению это имеет одноуровневый элемент блочного уровня в < div> выше которого Вы попросили быть больших 30 пкс. Таким образом, общее количество родительского контейнера теперь просят измерить к 100% + 30 пкс> 100%! Следовательно полосы прокрутки.
, Что я думаю, Вы средний - то, что Вы хотели бы, чтобы iframe использовал , что уехало как кадры, и ячейки таблицы могут, т.е. высота = "*". IIRC это не существует.
, К сожалению, насколько я знаю нет никакого способа эффективно смешать/вычислить/вычесть абсолютные и относительные единицы также, таким образом, я думаю, что Вы уменьшаетесь до двух опций:
-
Абсолютно располагают Ваше отделение, которое вынет его из контейнера, таким образом, iframe один использует, это - высота контейнеров. Это оставляет Вас со всем способом других проблем, хотя, но возможно для то, что Вы делаете непрозрачность или выравнивание, было бы в порядке.
-
, Кроме того, необходимо определить один % высотой для отделения и уменьшить высоту iframe так очень. Если абсолютная высота будет действительно настолько важна, то необходимо будет применить это к дочернему элементу отделения вместо этого.
Это правильно, Вы показываете iframe с уважением 100% высотой к его контейнеру: тело.
Попытка это:
<body>
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<div style="width:100%; height:90%; background-color:transparent;">
<iframe src="http: //www.google.com.tw" style="width:100%; height:100%;">
</iframe>
</div>
</body>
, Конечно, измените высоту второго отделения к высоте, которую Вы хотите.
Мы используем JavaScript для решения этой проблемы; вот источник.
<час>var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');
function pageY(elem) {
return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= pageY(document.getElementById('ifm'))+ buffer ;
height = (height < 0) ? 0 : height;
document.getElementById('ifm').style.height = height + 'px';
}
// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
iframe.attachEvent("onload", resizeIframe);
} else {
iframe.onload=resizeIframe;
}
window.onresize = resizeIframe;
Примечание: ifm iframe идентификатор
pageY(), был создан John Resig (автор jQuery)
или можно пойти олдскульные и использовать frameset, возможно:
<frameset rows="30,*">
<frame src="banner.swf"/>
<frame src="inner.html" />
</frameset>
Вы можете сделать это с помощью DOCTYPE , но вы должны использовать таблицу . Проверьте это:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<table>
<tr><td class="header"><div><h1>Header</h1></div></td></tr>
<tr><td class="content">
<iframe src="http://google.com/" frameborder="0"></iframe></td></tr>
</table>
</body>
</html>
?????? ?????? ??????? ??? - ???????????? position: fixed; ?? ???????????? ????.
???? ? ?? ????????, position: fixed; ??????????? ??????? ? ??????? ?????????, ????? ???????, ??? ?????? ?? ?????? ????? ???? width: 100%; ? height: 100%; ????????, ?? ????? ?????????? ???? ?????. ? ????? ??????? ?? ?????? ????????? ? ???? ???