Сделайте iframe так, чтобы он соответствовал 100% оставшейся высоты контейнера
Я хочу создать веб-страницу с баннером и iframe. Я надеюсь, что iframe сможет заполнить всю оставшуюся высоту страницы и автоматически изменить размер по мере изменения размера браузера. Можно ли сделать это без написания кода JavaScript, только с помощью CSS?
Я попытался установить height:100% на iframe, результат довольно близок, но iframe попытался заполнить всю высоту страницы, включая высоту 30px элемента div баннера, поэтому я получил ненужную вертикальную полосу прокрутки. Это не идеально.
Я попробовал CSS margin, padding атрибут в DIV, чтобы успешно занять всю оставшуюся высоту веб-страницы, но с iframe этот трюк не сработал.
<body>
<div style = "width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src = "http: //www.google.com.tw" style = "width:100%; height:100%;"></iframe>
</body>
Ответы 26
Правильно, вы показываете 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>
Конечно, измените высоту второго div на желаемую высоту.
Я думаю, у вас здесь концептуальная проблема. Сказать «Я попытался установить высоту: 100% в iframe, результат довольно близок, но iframe попытался заполнить всю страницу», хорошо, когда «100%» не было равно «целому»?
Вы попросили iframe заполнить всю высоту своего контейнера (который является телом), но, к сожалению, у него есть брат уровня блока в <div>, выше которого вы просили, чтобы он был размером 30 пикселей. Итак, общий размер родительского контейнера теперь должен быть увеличен до 100% + 30 пикселей> 100%! Отсюда полосы прокрутки.
Я думаю, что вы иметь в виду хотите, чтобы iframe потреблял то, что осталось, как фреймы и ячейки таблицы, то есть height = "*". IIRC этого не существует.
К сожалению, насколько мне известно, нет способа эффективно смешивать / вычислять / вычитать абсолютные и относительные единицы, поэтому я думаю, что у вас есть два варианта:
Абсолютно позиционируйте свой div, который достанет его из контейнера, чтобы только iframe будет потреблять его высота контейнеров. Это оставляет вас со всеми другими проблемами хотя, но, возможно, за то, что ты сделать непрозрачность или выравнивание было бы в порядке.
В качестве альтернативы вам нужно указать % height для div и уменьшите высота iframe на столько. Если абсолютная высота действительно это важно, что вам нужно подать заявку это для дочернего элемента div вместо.
Вы можете сделать это, измерив размер тела при загрузке / изменении размера и установив высоту (полная высота - высота баннера).
Обратите внимание, что в настоящее время в IE8 Beta2 вы не можете сделать это при изменении размера, так как это событие в настоящее время не работает в IE8 Beta2.
Мы используем 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() был создан Джоном Ресигом (автором jQuery)
или вы можете пойти по старой школе и, возможно, использовать набор фреймов:
<frameset rows = "30,*">
<frame src = "banner.swf"/>
<frame src = "inner.html" />
</frameset>
@vdbuilder: Нет, это только действительный pre-html5. Бьюсь об заклад, это все еще работает. ;-)
Вы можете сделать это с помощью DOCTYPE, но вы должны использовать table. Проверь это:
<!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>
по крайней мере, для этого не нужен js !! но безопасно ли это в сети?
Обратной стороной этого решения является то, что html, body {overflow: hidden;} удалит прокрутку страницы.
Я пытаюсь добавить нижний колонтитул в приведенный выше код, но нижний колонтитул не отображается. не могли бы вы помочь.
Другой способ сделать это - использовать position: fixed; на родительском узле.
Если я не ошибаюсь, position: fixed; привязывает элемент к области просмотра, таким образом, как только вы дадите этому узлу свойства width: 100%; и height: 100%;, он будет охватывать весь экран. С этого момента вы можете поместить в него тег <iframe> и растянуть его на оставшееся пространство (как по ширине, так и по высоте) с помощью простой инструкции CSS width: 100%; height: 100%;.
Пример кода
body {
margin: 0px;
padding: 0px;
}
/* iframe's parent node */
div#root {
position: fixed;
width: 100%;
height: 100%;
}
/* iframe itself */
div#root > iframe {
display: block;
width: 100%;
height: 100%;
border: none;
} <html>
<head>
<title>iframe Test</title>
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
</head>
<body>
<div id = "root">
<iframe src = "http://stackoverflow.com/">
Your browser does not support inline frames.
</iframe>
</div>
</body>
</html>Как это берет "оставшуюся" высоту ..?
Я заметил, что вам также нужно добавить position: fixed в iframe.
нет видимых полос прокрутки
идеально - не могли бы вы объяснить css '>', например, div # root> iframe furtheras, я с ним не знаком и не могу найти ссылку
@andrej Любой способ включить полосы прокрутки
Возможно, на этот вопрос уже был дан ответ (несколько ответов выше - это «правильные» способы сделать это), но я подумал, что просто добавлю свое решение.
Наш iFrame загружается в div, поэтому мне нужно что-то еще, кроме window.height. И поскольку наш проект уже сильно зависит от jQuery, я считаю это наиболее элегантным решением:
$("iframe").height($("#middle").height());
Где, конечно, "#middle" - это идентификатор div. Единственное, что вам нужно сделать, это вспомнить это изменение размера всякий раз, когда пользователь изменяет размер окна.
$(window).resize(function() {
$("iframe").height($("#middle").height());
});
Попробовав какое-то время css-маршрут, я закончил тем, что написал на jQuery что-то довольно простое, что помогло мне:
function iframeHeight() {
var newHeight = $j(window).height();
var buffer = 180; // space required for any other elements on the page
var newIframeHeight = newHeight - buffer;
$j('iframe').css('height',newIframeHeight); //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
}
// When DOM ready
$(function() {
window.onresize = iframeHeight;
}
Протестировано в IE8, Chrome, Firefox 3.6
У меня работает код MichAdel, но я внес небольшие изменения, чтобы он работал правильно.
function pageY(elem) {
return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 10; //scroll bar buffer
function resizeIframe() {
var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
height -= pageY(document.getElementById('ifm'))+ buffer ;
height = (height < 0) ? 0 : height;
document.getElementById('ifm').style.height = height + 'px';
}
window.onresize = resizeIframe;
window.onload = resizeIframe;
Вот что я сделал. У меня была такая же проблема, и в итоге я часами искал ресурсы в Интернете.
<style type = "text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { position:fixed; display:block; width:100%; border:none; }
</style>
Я добавил это в раздел головы.
Обратите внимание, что мой iframe расположен внутри средней ячейки таблицы с 3 строками и 1 столбцом.
Ваш код будет работать только в том случае, если TD, содержащий IFRAME, имеет высоту: 100%. Это будет работать, если таблица содержится в элементе DIV, потому что у вас есть стиль для всех div, который имеет высоту: 100%.
Вы можете сделать это с помощью html / css следующим образом:
<body>
<div style = "width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src = "http: //www.google.com.tw" style = "position:fixed;top:30px;bottom:0px;width:100%;"></iframe>
</body>
попробуйте следующее:
<iframe name = "" src = "" width = "100%" style = "height: 100em"/>
это сработало для меня
Не заполняет родительский элемент, просто увеличивает высоту iframe.
Хотя я согласен, что JS кажется лучшим вариантом, у меня есть решение, работающее только на CSS. Обратной стороной этого является то, что если вам нужно часто добавлять контент в html-документ iframe, вам придется адаптировать время на один процент.
Решение:
Попробуйте не уточняя любой высоты для ОБЕИХ HTML-документов,
html, body, section, main-div {}
тогда только кодируйте это:
#main-div {height:100%;}
#iframe {height:300%;}
примечание: div должен быть вашим основным разделом.
Это должно относительно работать. iframe точно вычисляет 300% видимой высоты окна. Если ваш HTML-контент из 2-го документа (в iframe) меньше по высоте, чем в 3 раза выше высоты вашего браузера, он работает. Если вам не нужно часто добавлять контент в этот документ, это постоянное решение, и вы можете просто найти свой собственный%, необходимый в соответствии с высотой вашего контента.
Это работает, потому что предотвращает наследование высоты второго HTML-документа (встроенного) от родительского HTML-документа. Это предотвращает это, потому что мы не указали высоту для них обоих. Когда мы даем% дочернему элементу, он ищет своего родителя, если нет, он берет высоту его содержимого. И только в том случае, если другим контейнерам не присвоена высота, из того, что я пробовал.
Атрибут «бесшовные» - это новый стандарт, призванный решить эту проблему:
http://www.w3schools.com/tags/att_iframe_seamless.asp
При назначении этого атрибута он удалит границы и полосы прокрутки и изменит размер iframe в соответствии с размером его содержимого. хотя он поддерживается только в Chrome и последней версии Safari
подробнее об этом здесь: Атрибут HTML5 iFrame Seamless
Атрибут Бесшовные был удален из спецификации HTML 5.
Простое решение jQuery
Используйте это в скрипте на странице iframe
$(function(){
if (window != top){
var autoIframeHeight = function(){
var url = location.href;
$(top.jQuery.find('iframe[src = "'+ url +'"]')).css('height', $('body').height()+4);
}
$(window).on('resize',autoIframeHeight);
autoIframeHeight();
}
}
вы не можете установить высоту iframe в%, потому что высота вашего родительского тела не равна 100%, поэтому сделайте родительскую высоту как 100%, а затем примените высоту iframe 100%
For eg.
<html>
<head>
<style>
html,body{height:100%}
</style>
</head>
<body>
<iframe src = "http://www.quasarinfosystem.com" height = "100%" width = "100%" ></iframe>
</body>
</html>
Новое в HTML5: использование calc (по высоте)
<html style = "width:100%; height:100%; margin: 0px; padding: 0px;">
<body style = "width:100%; height:100%; margin: 0px; padding: 0px;">
<div style = "width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src = "http://www.google.com.tw" style = "width:100%; height: calc(100% - 30px);"></iframe>
</body>
</html>
Вот несколько современных подходов:
Подход 1 - комбинация относительные единицы области просмотра /
calc().Выражение
calc(100vh - 30px)представляет оставшуюся высоту. Где100vh- это высота браузера, а использованиеcalc()эффективно смещает высоту другого элемента.body { margin: 0; } .banner { background: #f00; height: 30px; } iframe { display: block; background: #000; border: none; height: calc(100vh - 30px); width: 100%; }<div class = "banner"></div> <iframe></iframe>Поддержка
calc()здесь; поддержка здесь относительные единицы просмотра.
Подход 2 - подход Flexbox
Установите
displayобщего родительского элемента наflexвместе сflex-direction: column(при условии, что вы хотите, чтобы элементы располагались друг над другом). Затем установитеflex-grow: 1на дочерний элементiframe, чтобы он заполнил оставшееся пространство.body { margin: 0; } .parent { display: flex; flex-direction: column; min-height: 100vh; } .parent .banner { background: #f00; width: 100%; height: 30px; } .parent iframe { background: #000; border: none; flex-grow: 1; }<div class = "parent"> <div class = "banner"></div> <iframe></iframe> </div>Поскольку этот подход имеет меньше поддержки1, я бы предложил использовать вышеупомянутый подход.
1Though it seems to work in Chrome/FF, it doesn't work in IE (the first method works in all current browsers).
И работа, и ИМО, два упомянутых здесь варианта - лучший подход. Я предпочитаю вариант flexbox, потому что с calc вам нужно знать, сколько места нужно вычесть из vh. С flexbox это делает простой flex-grow:1.
Он будет работать с приведенным ниже кодом
<iframe src = "http: //www.google.com.tw"style = "position: absolute; height: 100%; border: none"></iframe>
Если у вас есть доступ к содержимому iframe, который будет загружен, вы можете указать его родительскому элементу изменять размер при каждом изменении размера.
$(window).resize(function() {
$(parent.document)
.find("iframe")
.css("height", $("body").css("height"));
}).trigger("resize");
Если у вас на странице более одного iframe, вам может потребоваться использовать идентификаторы или другие умные методы для улучшения .find ("iframe"), чтобы вы выбрали правильный.
Аналогичный ответ @MichAdel, но я использую JQuery и более элегантный.
<script type = "text/javascript">
$(document).ready(function() {
var $iframe = $('#iframe_id')[0];
// Calculate the total offset top of given jquery element
function totalOffsetTop($elem) {
return $elem.offsetTop + ($elem.offsetParent ? totalOffsetTop($elem.offsetParent) : 0);
}
function resizeIframe() {
var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
height -= totalOffsetTop($iframe);
$iframe.height = Math.max(0, height) + 'px';
}
$iframe.onload = resizeIframe();
window.onresize = resizeIframe;
});
</script>
iframe_id - это идентификатор тега iframe.
Я думаю, что лучший способ достичь этого сценария - использовать позицию css. установите позицию относительно вашего родительского div и position: absolute для вашего iframe.
.container{
width:100%;
position:relative;
height:500px;
}
iframe{
position:absolute;
width:100%;
height:100%;
}<div class = "container">
<iframe src = "http://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</div>для других проблем с заполнением и маржей теперь дни css3 calc () очень продвинуты и в основном совместимы со всеми браузерами.
проверьте calc ()
Я использовал display: table, чтобы исправить аналогичную проблему. Для этого работает почти, оставляя небольшую вертикальную полосу прокрутки. Если вы пытаетесь заполнить этот гибкий столбец чем-то другим, кроме iframe, он отлично работает (не
Возьмите следующий HTML-код
<body>
<div class = "outer">
<div class = "banner">Banner</div>
<div class = "iframe-container">
<iframe src = "http: //www.google.com.tw" style = "width:100%; height:100%;border:0;"></iframe>
</div>
</div>
</body>
Измените внешний div, чтобы использовать display: table, и убедитесь, что для него установлены ширина и высота.
.outer {
display: table;
height: 100%;
width: 100%;
}
Сделайте баннер строкой таблицы и установите его высоту в соответствии с вашими предпочтениями:
.banner {
display: table-row;
height: 30px;
background: #eee;
}
Добавьте дополнительный div вокруг вашего iframe (или любого другого контента, который вам нужен) и сделайте его строкой таблицы с высотой, установленной на 100% (установка ее высоты имеет решающее значение, если вы хотите встроить iframe для заполнения высоты)
.iframe-container {
display: table-row;
height: 100%;
}
Ниже приведен jsfiddle, показывающий его в работе (без iframe, потому что он, похоже, не работает в скрипке)
Почему бы не сделать это (с небольшой поправкой на заполнение / поля тела)
<script>
var oF = document.getElementById("iframe1");
oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
В конце вам нужно заменить -0 на +'px'. Это работает на мобильном телефоне?
Другая альтернатива с использованием vh
<iframe src='/' style = "display:block; border:none; height:100vh; width:100%;"></iframe>
можно использовать calc (100% - 30px) вместо 90%