Question

基本上我尝试做的是在页面顶部有一个单独的瘦工具栏，其中有一排各种DIV容器作为按钮工作。我希望这些按钮更新工具栏下方的iframe内容。问题是工具栏下面的iframe高度只有150像素。具体来说，当我指定<!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标准的任何想法？感谢

Answer 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/

Answer 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;
}

<强> 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";

请注意＆＃34; + 8＆＃34;用于谷歌浏览器中的垂直滚动条宽度/水平滚动条高度。

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

Answer 3

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

mongoexport.exe -h *HOST* -p *PORT* -q "{ 'created_at' : { '$lt' : { '$date' : '2014-03-07T06:32:19.172Z' } } }"

HTML5 iFrame的高度仅为150像素

3 个答案: