HTML5 iFrame 的高度只有 150 像素答案

【问题标题】：HTML5 iFrame is only 150px in heightHTML5 iFrame 的高度只有 150 像素
【发布时间】：2014-09-17 15:03:52
【问题描述】：

基本上，我想要做的是在我的页面顶部有一个单一的薄工具栏，其中有一排不同的 DIV 容器用作按钮。我希望这些按钮更新工具栏下方 iframe 的内容。问题是我在工具栏下方的 iframe 只有 150px 的高度。具体来说，当我指定<!DOCTYPE html> 时会发生这种情况，但是当我没有指定此 HTML5 文档类型时，它可以正常工作。

我对此进行了一些阅读，这看起来像是is that HTML5 no longer covers percentages to be able to set the width and height of an iFrame. 的原因但是现在我被卡住了，因为我无法让 iFrame 增长到工具栏下窗口剩余高度的 100%。我什至创建了一个 iframe_container DIV 并将 iframe 放入其中，iframe_container 位于 height=%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;   
}

我已经尝试过 iframe 的无缝属性，但它似乎也没有帮助。到目前为止，我发现的最佳选择是将{position: absolute; top: 30px; bottom: 0px;} 添加到我的 iframe_container 类中，这确实解决了 iframe 大小问题，但是它引入了一些非常奇怪的滚动行为，包括右侧的双滚动条。关于如何确保 iframe 填满窗口底部并仍保持 HTML5 兼容的任何想法？谢谢

【问题讨论】：

在最坏的情况下，使用 JS 检索页面尺寸并显式设置 iframe 大小。

标签： css html iframe height

【解决方案1】：

可能是这样的吧？

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/

【讨论】：

答案最终出现在您的帖子中。高度为 100% 的 body 标签修复了所有浏览器中的怪异现象。

【解决方案2】：

这个是我做的，不知道是不是你想要的：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;
}

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”用于谷歌浏览器中的垂直滚动条宽度/水平滚动条高度。

创建一个获取 iframe 滚动条高度/宽度值的函数（如果可能，我不相信这是可能的）。如果没有，请使用函数来确定正在使用的浏览器 (http://www.quirksmode.org/js/detect.html) 并使用浏览器创建一个 switch 语句（如果你想非常彻底，还可以使用版本）并设置一个滚动变量来替换我函数中的 8

【讨论】：

【解决方案3】：

我似乎能够在 div 标签内调整 iframe 的大小，并且只需添加高度和宽度。当我无法做到时，不是！Doctype 是我拥有的表格以及其他与错误标记的 div 标签或其他轻微错误有关的问题。

<div><iframe src="demo_iframe.htm" style="border:none" width="1050"
height="345" name="content"></iframe></div>

【讨论】：