Сделайте Iframe, чтобы соответствовать 100% оставшейся высоты контейнера - PullRequest
Новая
       35

Сделайте Iframe, чтобы соответствовать 100% оставшейся высоты контейнера

219 голосов
/ 28 ноября 2008

Я хочу создать веб-страницу с баннером и фреймом. Я надеюсь, что iframe может заполнить всю оставшуюся высоту страницы и будет автоматически изменен по мере изменения размера браузера. Возможно ли это сделать без написания кода Javascript, только с помощью CSS?

Я попытался установить height:100% в iframe, результат довольно близок, но iframe попытался заполнить всю высоту страницы, включая 30px высоту элемента div баннера, поэтому я получил ненужную вертикальную полосу прокрутки. Это не идеально.

Обновление примечаний : Извините, что я не очень хорошо описал вопрос, я попробовал CSS margin, padding attribute в 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 ]

3 голосов
/ 03 декабря 2011

Вы можете сделать это с помощью 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>
2 голосов
/ 29 декабря 2014

Новое в 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>
2 голосов
/ 09 марта 2016

Я использовал 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, показывающий его на работе (без фрейма, потому что в скрипте это не работает)

https://jsfiddle.net/yufceynk/1/

1 голос
/ 20 августа 2015

Аналогичный ответ @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

1 голос
/ 13 мая 2015

Будет работать с кодом ниже 

<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>
1 голос
/ 28 ноября 2008

Я думаю, у вас здесь есть концептуальная проблема. Сказать "Я попытался установить высоту: 100% на iframe, результат довольно близок, но iframe попытался заполнить всю страницу" , хорошо, когда "100%" не было равно "целому"

Вы попросили, чтобы iframe заполнил всю высоту своего контейнера (который является телом), но, к сожалению, у него есть одноуровневый элемент уровня

, над которым вы просили иметь размер 30px. Таким образом, общий объем родительского контейнера теперь запрашивается до 100% + 30px> 100%! Отсюда полосы прокрутки.

То, что я думаю, вы имеете в виду , это то, что вы бы хотели, чтобы iframe потреблял того, что осталось , как могут делать фреймы и ячейки таблицы, то есть height = "*". IIRC этого не существует.

К сожалению, насколько мне известно, нет никакого способа эффективно смешивать / вычислять / вычитать абсолютные и относительные единицы, поэтому я думаю, что вы сведены к двум вариантам:

  1. Абсолютно позиционируйте свой div, который достанет его из контейнера так только iframe будет потреблять это высота контейнеров Это оставляет вас со всевозможными другими проблемами хотя, но возможно для чего ты делать непрозрачность или выравнивание будет ок.

  2. В качестве альтернативы вам нужно указать % высоты для div и уменьшить высота iframe на столько. Если абсолютная высота действительно что важно, вам нужно подать заявку что дочернему элементу div вместо этого.

1 голос
/ 15 октября 2010

Попробовав некоторое время маршрут 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

0 голосов
/ 17 февраля 2016

Я думаю, что лучший способ достичь этого сценария, используя позицию CSS. установите позицию относительно вашего родительского div и позицию: абсолютную для вашего 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 () очень продвинут и в основном совместим со всеми браузерами.

check calc ()

0 голосов
/ 23 июня 2015

Если у вас есть доступ к содержимому iframe, который будет загружен, вы можете указать его родителю изменять размер при каждом изменении размера. 

    $(window).resize(function() {
        $(parent.document)
            .find("iframe")
            .css("height", $("body").css("height"));        
    }).trigger("resize");

Если у вас более одного iframe на странице, вам может понадобиться использовать id или другие хитрые методы для улучшения .find ("iframe"), чтобы вы выбрали правильный.

0 голосов
/ 30 марта 2009

или вы можете пойти в школу и использовать frameset возможно: 

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...