iframe 100% 内部高度，带填充 [英] Iframe 100% height inside body with padding
问题描述
我的 HTML 文档中有一个 iframe，但遇到了一些麻烦.
I have an iframe in my HTML document and I'm having a bit of trouble.
我在页面顶部还有一个 URL 栏(固定位置元素)，在用户滚动时应该与用户保持一致.这很好用.我希望 iframe 填充剩余空间但不被 URL 栏覆盖.
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.
这就是我要说的.http://s75582.gridserver.com/Ls
我该如何解决这个问题，以便 URL 栏不会覆盖页面的一部分?当我尝试在 body 中设置 padding 时，它只会创建一个额外的、烦人的滚动条.
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.
推荐答案
虽然你不能在 CSS 中说高度:100% 减去一些像素"，但你可以将 iframe 设置为 100% 高，然后使用填充.然后你可以利用 CSS3 box-sizing 属性从高度中减去填充.
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.
这个:
<!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>
适用于 IE8、Moz、Op、Saf、Chrome.对于不支持框大小的浏览器(尤其是高达 7 的 IE)，您必须继续使用 JavaScript 回退来使额外的滚动条消失.
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).
这篇关于iframe 100% 内部高度，带填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
