Html iframe 100% 内部高度，带填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1303729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 00:38:48 来源:igfitidea点击:
Iframe 100% height inside body with padding
提问by Giles Van Gruisen
I have an iframe in my HTML document and I'm having a bit of trouble.
我的 HTML 文档中有一个 iframe，但遇到了一些麻烦。
I also have a URL bar (fixed position element) at the top of the page that should stay with the user as they scroll. That works fine. I'd like the iframe to fill the remaining space but not be covered up by the URL bar.
我还在页面顶部有一个 URL 栏（固定位置元素），在用户滚动时应该与用户保持一致。这很好用。我希望 iframe 填充剩余空间但不被 URL 栏覆盖。
This is what I'm talking about. http://s75582.gridserver.com/Ls
这就是我要说的。http://s75582.gridserver.com/Ls
How can I fix this so that the URL bar doesn't cover up part of the page? When I try setting padding in the body, it just creates an extra, annoying scroll bar.
我该如何解决这个问题，以便 URL 栏不会覆盖页面的一部分？当我尝试在 body 中设置 padding 时，它只会创建一个额外的、烦人的滚动条。
回答by bobince
Whilst you can't say ‘height: 100% minus some pixels' in CSS, you can make the iframe 100% high, then push its top down using padding. Then you can take advantage of the CSS3 box-sizing property to make the padding get subtracted from the height.
虽然您不能在 CSS 中说“高度：100% 减去一些像素”，但您可以将 iframe 设置为 100% 高，然后使用填充将其顶部向下推。然后您可以利用 CSS3 box-sizing 属性从高度中减去填充。
This:
这个：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#bar { height: 32px; background: red; }
iframe {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
border: none; padding-top: 32px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
</style>
</head><body>
<iframe src="http://www.google.com/"></iframe>
<div id="bar">foo</div>
<body></html>
Works on IE8, Moz, Op, Saf, Chrome. You'd have to carry on using a JavaScript fallback to make the extra scrollbar disappear for browsers that don't support box-sizing though (in particular IE up to 7).
适用于 IE8、Moz、Op、Saf、Chrome。对于不支持框大小的浏览器（尤其是高达 7 的 IE），您必须继续使用 JavaScript 回退来使额外的滚动条消失。
回答by Evgeny
It can be done without any Javascript, works in IE7
它可以在没有任何 Javascript 的情况下完成，适用于 IE7
CSS:
CSS：
body {
overflow-y: hidden;
}
#imagepgframe {
width: 100%;
height: 100%;
position: absolute;
}
#wrap {
width: 100%;
position: absolute;
top: 100px;
left: 0;
bottom: 0;
}
HTML:
HTML：
<div id="wrap">
<iframe id="imagepgframe" frameBorder="0" src="http://en.wikipedia.org/wiki/Internet_Explorer_7"></iframe>
</div>
回答by Christopher Parker
To build on top of bobince's answer:
建立在bobince 的回答之上：
Erik Arvidssoncame up with a way to (kinda, sorta) add box-sizing support to IE6/IE7. However, his solution doesn't support units other than px. Like you, I needed a percentage height, so I added support for percents.
Erik Arvidsson想出了一种方法来（有点，有点）向 IE6/IE7添加框大小支持。但是，他的解决方案不支持px. 像你一样，我需要一个百分比高度，所以我添加了对百分比的支持。
Once you've downloaded and unzipped the zip file, open boxsizing.htc and replace the following border/padding functions:
下载并解压zip 文件后，打开 boxsizing.htc 并替换以下边框/填充功能：
/* border width getters */
function getBorderWidth(el, sSide) {
if (el.currentStyle["border" + sSide + "Style"] == "none")
return 0;
var n = parseInt(el.currentStyle["border" + sSide + "Width"]);
return n || 0;
}
function getBorderLeftWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Left"); }
function getBorderRightWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Right"); }
function getBorderTopWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Top"); }
function getBorderBottomWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Bottom"); }
/* end border width getters */
/* padding getters */
function getPadding(el, sSide) {
var n = parseInt(el.currentStyle["padding" + sSide]);
return n || 0;
}
function getPaddingLeft() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Left"); }
function getPaddingRight() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Right"); }
function getPaddingTop() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Top"); }
function getPaddingBottom() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Bottom"); }
/* end padding getters */
Then replace updateBorderBoxWidthand updateBorderBoxHeightwith the following:
然后用以下内容替换updateBorderBoxWidth和updateBorderBoxHeight：
function updateBorderBoxWidth() {
element.runtimeStyle.width = "";
if (getDocumentBoxSizing() == getBoxSizing())
return;
var csw = element.currentStyle.width;
var w = null;
if (csw != "auto" && csw.indexOf("px") != -1) {
w = parseInt(csw);
} else if (csw != "auto" && csw.indexOf("%") != -1) {
var origDisplay = element.runtimeStyle.display;
element.runtimeStyle.display = "none";
w = Math.max(0, (parseInt(element.parentNode.clientWidth) - (
getBorderLeftWidth(element.parentNode)
+ getPaddingLeft(element.parentNode)
+ getPaddingRight(element.parentNode)
+ getBorderRightWidth(element.parentNode)
)) * (parseInt(csw) / 100));
element.runtimeStyle.display = origDisplay;
}
if (w !== null) {
if (getBoxSizing() == "border-box") {
setBorderBoxWidth(w);
} else {
setContentBoxWidth(w);
}
}
}
function updateBorderBoxHeight() {
element.runtimeStyle.height = "";
if (getDocumentBoxSizing() == getBoxSizing())
return;
var csh = element.currentStyle.height;
var h = null;
if (csh != "auto" && csh.indexOf("px") != -1) {
h = parseInt(csh);
} else if (csh != "auto" && csh.indexOf("%") != -1) {
var origDisplay = element.runtimeStyle.display;
element.runtimeStyle.display = "none";
h = Math.max(0, (parseInt(element.parentNode.clientHeight) - (
getBorderTopWidth(element.parentNode)
+ getPaddingTop(element.parentNode)
+ getPaddingBottom(element.parentNode)
+ getBorderBottomWidth(element.parentNode)
)) * (parseInt(csh) / 100));
element.runtimeStyle.display = origDisplay;
}
if (h !== null) {
if (getBoxSizing() == "border-box") {
setBorderBoxHeight(h);
} else {
setContentBoxHeight(h);
}
}
}
Then just use the file as you would otherwise:
然后像其他情况一样使用该文件：
.border-box {
behavior: url("boxsizing.htc");
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
Here's a pretty thorough test I put together while developing my modifications:
这是我在开发修改时进行的非常彻底的测试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>box-sizing: border-box;</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: yellow;
}
body {
padding-top: 50px;
padding-bottom: 50px;
}
p {
margin: 0;
}
#header, #footer {
height: 50px;
position: absolute;
width: 100%;
overflow: hidden;
}
#header {
background: red;
top: 0;
}
#footer {
background: blue;
bottom: 0;
}
#content {
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
background: black;
color: white;
overflow: auto;
position: relative;
padding-top: 40px;
padding-bottom: 40px;
}
#nested-header, #nested-footer {
position: absolute;
height: 40px;
width: 100%;
background: #CCC;
}
#nested-header {
top: 0;
}
#nested-footer {
bottom: 0;
}
#nested-content-wrap {
height: 100%;
}
#nested-floater {
height: 100%;
float: left;
width: 100px;
}
#nested-content {
height: 100%;
background: green;
color: black;
overflow: auto;
position: relative;
}
#inner-nest {
height: 100%;
position: relative;
}
#inner-head {
height: 30px;
width: 100%;
background: #AAA;
position: absolute;
top: 0;
}
#inner-content {
padding-top: 30px;
height: 100%;
overflow: auto;
}
.border-box {
behavior: url("boxsizing.htc");
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.content-box {
behavior: url("boxsizing.htc");
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
legend {
color: black;
}
form {
margin: 1em 0;
}
.wrap {
height: 100px;
background: #000;
overflow: hidden;
}
.test {
width: 100px;
height: 100%;
background: #AAA;
border-color: #EEE;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 5px;
float: left;
}
.fill {
width: 100%;
height: 100%;
background: #CCC;
}
.gauge {
width: 99px;
background: white;
border-right: 1px solid green;
height: 100%;
float: left;
}
.notes {
background: #8FC561;
}
.clear {
clear: both;
}
/* 120px x 120px square; this will create a black 20px frame on the inside */
.boxtest-wrapper {
width: 100px;
height: 100px;
float: left;
background: black;
color: white;
margin: 1em;
padding: 20px;
}
#boxtest-4-container {
width: 100%;
height: 100%;
}
.boxtest {
width: 100%;
height: 100%;
background: white;
color: black;
border: 5px solid green;
overflow: hidden;
}
</style>
<script type="text/javascript">
function addBorderBox() {
var wrap1 = document.getElementById("wrap-1");
var wrap2 = document.getElementById("wrap-2");
var borderBox = document.createElement("div");
borderBox.className = "test border-box";
var borderBoxFill = document.createElement("div");
borderBoxFill.className = "fill";
var borderBoxContent = document.createTextNode("Generated border box fill");
borderBoxFill.appendChild(borderBoxContent);
borderBox.appendChild(borderBoxFill);
var gauge = document.createElement("div");
gauge.className = "gauge";
var gaugeText1 = "width: 100px";
var gaugeText2 = "height: 100%";
var gaugeText3 = "bottom should be visible";
gauge.appendChild(document.createTextNode(gaugeText1));
gauge.appendChild(document.createElement("br"));
gauge.appendChild(document.createTextNode(gaugeText2));
gauge.appendChild(document.createElement("br"));
gauge.appendChild(document.createTextNode(gaugeText3));
wrap1.appendChild(borderBox);
wrap2.appendChild(gauge);
}
</script>
</head>
<body id="body" class="border-box">
<div id="header">
<p>Header - 50px;</p>
</div>
<div id="content" class="border-box">
<div id="nested-header">
<p>Nested Header - 40px;</p>
</div>
<div id="nested-content-wrap">
<div id="nested-floater">
<p>Float - 100px;</p>
<ul>
<li>This element should never scroll.</li>
</ul>
</div>
<div id="nested-content">
<div id="inner-nest">
<div id="inner-head">
<p>Inner Head - 30px;</p>
</div>
<div id="inner-content" class="border-box">
<div style="float: right; ">
<p>The fourth square should look just like the other three:</p>
<div id="boxtest-wrapper-1" class="boxtest-wrapper">
<div id="boxtest-1" class="boxtest border-box"></div>
</div>
<div id="boxtest-wrapper-2" class="boxtest-wrapper">
<div id="boxtest-2" class="boxtest border-box"></div>
</div>
<br class="clear" />
<div id="boxtest-wrapper-3" class="boxtest-wrapper">
<div id="boxtest-3" class="boxtest border-box"></div>
</div>
<div id="boxtest-wrapper-4" class="boxtest-wrapper">
<div id="boxtest-4-container">
<!-- boxtest-4-container isn't special in any way. it just has width and height set to 100%. -->
<div id="boxtest-4" class="boxtest border-box"></div>
</div>
</div>
</div>
<p>Inner Content - fluid</p>
<ul>
<li>The top of the scrollbar should be covered by the “Inner Head” element.</li>
<li>The bottom of the scrollbar should be visible without having to scroll “Inner Head” out of view.</li>
</ul>
<p>Document Compat Mode:
<strong id="compatMode">
<script type="text/javascript">
var compatMode = document.compatMode;
if (compatMode != "CSS1Compat") {
document.getElementById("compatMode").style.color = "red";
}
document.write(compatMode);
</script>
</strong>
</p><br />
<div class="notes">
<h2>Notes</h2>
<ul>
<li>In IE6 and IE7 (and possibly IE8; untested), you'll notice a slight shift of contents that have <code>box-sizing</code> set to <code>border-box</code>. This is the amount of time it takes for <a href="box-sizing.htc">box-sizing.htc</a> to finish downloading.</li>
<li>This workaround is not live. Anything that causes a <a href="http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/">reflow or repaint</a> will not currently trigger an update to widths and heights of <code>border-box</code> elements.</li>
<li>See <a href="http://webfx.eae.net/dhtml/boxsizing/boxsizing.html">http://webfx.eae.net/dhtml/boxsizing/boxsizing.html</a> for the original solution to the IE6/IE7 <code>border-box</code> problem. <a href="box-sizing.htc">box-sizing.htc</a> has been modified to allow for percentage widths and heights.</li>
<li>To see what this example should look like without the use of <a href="box-sizing.htc">box-sizing.htc</a>, view it in Firefox or IE8.</li>
</ul>
</div>
<br class="clear" />
<form>
<fieldset>
<legend>DOM Update Test</legend>
<input type="button" value="Click to add border-box" onclick="addBorderBox(); " />
</fieldset>
</form>
<div id="wrap-1" class="wrap">
<div class="test content-box" id="content-box-1" style="border-width: 5px; border-style: solid;">
<div class="fill">Content box fill</div>
</div>
<div class="test content-box" id="content-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
<div class="fill">Content box fill</div>
</div>
<div class="test border-box" id="border-box-1" style="border-width: 5px; border-style: solid;">
<div class="fill">Border box fill</div>
</div>
<div class="test border-box" id="border-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
<div class="fill">Border box fill</div>
</div>
<div class="test" id="default-box-1" style="border-width: 5px; border-style: solid;">
<div class="fill">Default box fill</div>
</div>
<div class="test" id="default-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
<div class="fill">Default box fill</div>
</div>
</div>
<div id="wrap-2" class="wrap">
<!-- subtract 1 from width for 1px right border -->
<div class="gauge" style="width: 129px;">width: 130px<br />height: 100%<br />bottom should be cut off</div>
<div class="gauge" style="width: 119px;">width: 120px<br />height: 100%<br />bottom should be cut off</div>
<div class="gauge">width: 100px<br />height: 100%<br />bottom should be visible</div>
<div class="gauge">width: 100px<br />height: 100%<br />bottom should be visible</div>
<div class="gauge" style="width: 129px;">width: 130px<br />height: 100%<br />bottom should be cut off</div>
<div class="gauge" style="width: 119px;">width: 120px<br />height: 100%<br />bottom should be cut off</div>
</div>
<br class="clear" />
<script type="text/javascript">
var lipsum = "<p>Lorem ipsum dolor sit amet.</p>";
for (var i = 0; i < 100; i++) {
document.write(lipsum);
}
</script>
</div>
</div>
</div>
</div>
<div id="nested-footer">
<p>Nested Footer - 40px;</p>
</div>
</div>
<div id="footer">
<p>Footer - 50px;</p>
</div>
</body>
</html>
回答by PortageMonkey
If by covering up part of the page, you mean the page displayed in the iframe, one thought might be to add a top margin to your iframe, using the margin-top: property in CSS. This would eliminate the scroll bar given that you properly constrained the height of the iframe.
如果通过覆盖页面的一部分，你的意思是显示在 iframe 中的页面，一个想法可能是使用 CSS 中的 margin-top: 属性为 iframe 添加一个上边距。鉴于您正确限制了 iframe 的高度，这将消除滚动条。
