HTML5 iFrame имеет высоту всего 150 пикселей

По сути, я пытаюсь сделать одну тонкую панель инструментов в верхней части моей страницы с рядом различных контейнеров DIV, работающих в качестве кнопок. Я хочу, чтобы эти кнопки обновляли содержимое iframe под панелью инструментов. Проблема в том, что мой iframe под панелью инструментов имеет высоту всего 150 пикселей. В частности, это происходит, когда я указываю <!DOCTYPE html>, но когда я не указываю этот тип документа HTML5, он работает нормально.

Я немного прочитал об этом, и похоже, причина в том, что HTML5 больше не покрывает проценты, чтобы иметь возможность устанавливать ширину и высоту iFrame. Однако сейчас я застрял, потому что не могу увеличить iFrame до 100% оставшейся высоты окна под панелью инструментов. Я даже создал DIV iframe_container и поместил в него iframe, где iframe_container находится на высоте =%100, но я все еще не могу заставить его работать правильно.

HTML:

<!DOCTYPE html>
<html>
<body>
<div class="header_bar">
  <div class="tab_active"   onclick="location.href='...'">Tab1</div>
  <div class="tab_inactive" onclick="location.href='...'">Tab2</div>
  <div class="tab_inactive" onclick="location.href='...'">Tab3</div>
</div>

<div class="iframe_container">
  <iframe id="main_iframe" class="main_iframe" frameborder="0" src="...">
  </iframe>
</div>
</body>
</html>

CSS:

.iframe_container {
  width: 100%;
  height: 100%;
}

.main_iframe {
  width: 100%;
  height: 100%;
}

.header_bar {
  float: none;
  width: 100%;
  height: 30px;
}

.tab_inactive {
  float: left; 
}

.tab_active {
  float: left;   
}

Я пробовал атрибут бесшовные для фреймов, и он, похоже, здесь тоже не помогает. Лучший вариант, который я нашел, это добавить {position: absolute; top: 30px; bottom: 0px;} к моему классу iframe_container, который исправляет проблему размера iframe, однако он вводит очень странное поведение прокрутки, включая двойные полосы прокрутки справа. Любые идеи о том, как я могу убедиться, что мой iframe заполняет нижнюю часть окна и по-прежнему оставаться HTML5-совместимым? Спасибо

Источник

3 ответа

Решение

Может быть как то так?

html { height:100% }
body { height:100%; width:100%; margin:0; display:table;}
.header_bar { display:table-row; }
.iframe_container { height:100%; display:table-cell; }
iframe { height:100%; width:100%; display:block; }

http://jsfiddle.net/wMaKx/

Источник

Кажется, я могу изменить размер своего iframe внутри тега div и просто добавить высоту и ширину. Когда я не мог этого сделать, не было! В Doctype это были таблицы, которые у меня были, и другие проблемы с ошибочно помеченными тегами div или другими небольшими ошибками.

<div><iframe src="demo_iframe.htm" style="border:none" width="1050"
height="345" name="content"></iframe></div>
Источник

Я сделал это, не уверен, что это то, что вы хотите: http://jsfiddle.net/ctwheels/62mbP/

HTML

<body onresize="myFunction()">
<div class="header_bar" id="header_bar">
    <div class="tab_active" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com'">HOME</div>
    <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/html/html_intro.asp'">HTML</div>
    <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/js/js_intro.asp'">JS</div>
    <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/sql/sql_intro.asp'">SQL</div>
    <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/php/php_intro.asp'">PHP</div>
    <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/xml/xml_whatis.asp'">XML</div>
</div>
<div id="iframe_and_div_container">
    <div class="iframe_container">
        <iframe id="main_iframe" class="main_iframe" frameborder="0" src="http://www.w3schools.com"></iframe>
    </div>
</div>

CSS

  body {
    overflow:hidden;
}
#iframe_and_div_container {
    position:relative;
    height:400px;
    width:800px;
}
.iframe_container {
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    top:0px;
}
.main_iframe {
    width: 100%;
    height: 100%;
}
.header_bar {
    position:fixed;
    width: 100%;
    height: 40px;
    background-color:grey;
    display:block;
    overflow:hidden;
    z-index:1000;
}
.tab_inactive, .tab_active {
    float: left;
    width:70px;
    padding:5px;
    margin:2px;
    border:2px solid grey;
    background-color:white;
    box-shadow:2px 2px #333333;
    text-align:center;
}

JS

var height = window.innerHeight;
var width = document.body.offsetWidth + 8;
var heightOfTabs = document.getElementById("header_bar").clientHeight;
var newHeight = height - heightOfTabs - 8;
document.getElementById("iframe_and_div_container").style.height = newHeight + "px";
document.getElementById("iframe_and_div_container").style.top = heightOfTabs + "px";
document.getElementById("iframe_and_div_container").style.width = width + "px";

Обратите внимание, что "+ 8" - это ширина вертикальной полосы прокрутки / высота горизонтальной полосы прокрутки в Google Chrome.

Создайте функцию, которая получает значения высоты / ширины полосы прокрутки в iframe (если возможно, я не верю, что это возможно). Если нет, используйте функцию для определения используемого браузера ( http://www.quirksmode.org/js/detect.html) и создайте оператор switch с браузерами (и версиями, если вы хотите быть очень тщательным) и установите переменная прокрутки, чтобы заменить 8 в моей функции

Источник
Другие вопросы по тегам