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栏不会覆盖网页的一部分？
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.
推荐答案
虽然你不能说出来'height：100％减去一些像素'在CSS，你可以使iframe 100％高，然后使用padding顶部向下。然后你可以利用CSS3的box-sizing属性，使padding从高度中减去。
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。您必须继续使用JavaScript备用版本，以便为不支持框大小的浏览器（尤其是IE最多7个）设置额外的滚动条。
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屋！
