iframe身体内部高度100％，带填充
我的HTML文档中有一个iframe，但遇到了一些麻烦。
我还在页面顶部有一个URL栏（固定位置元素），当用户滚动时，URL栏应随用户使用。很好 我希望iframe可以填充剩余空间，但不会被网址栏覆盖。
这就是我在说的。http://s75582.gridserver.com/Ls
如何解决此问题，以使URL栏不覆盖页面的一部分？当我尝试在主体中设置padding时，它只会创建一个额外的，令人讨厌的滚动条。
问题答案：
虽然您在CSS中不能说“高度：100％减去一些像素”，但可以将iframe设置为100％高，然后使用填充将其顶部向下推。然后，您可以利用CSS3的box-
sizing属性使填充物从高度中减去。
这个：
<!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。对于不支持框大小调整的浏览器（特别是IE
7以下版本），您必须继续使用JavaScript后备广告来使多余的滚动条消失。
-
问题内容： 使用HTML / CSS，如何制作宽度和/或高度为其父元素的100％并且仍然具有适当的填充或边距的元素？ 所谓“适当的”我的意思是，如果我的父元素是高大的，我指定用我所期望的，我应该得到一个高的元素与所有各方，很好地集中在父元素。 现在，我知道这不是标准盒模型指定它应该工作的方式（尽管我想确切地知道为什么），所以显而易见的答案不起作用： 但是在我看来，必须有某种方法可以可靠地为任意大小
-
问题内容： 所有浏览器均支持iframe height = 100％吗？ 我使用doctype作为： 在我的iframe代码中，如果我说： 我的意思是说，它实际上会占用其余页面的高度吗（因为顶部还有另一个固定高度为50px的框架），所有主流浏览器（IE / Firefox / Safari）都支持吗？ 关于滚动条，即使我说了，我也可以在Firefox中看到禁用的滚动条…如何完全隐藏滚动条并自动设置
-
问题内容： 所有浏览器均支持iframe height = 100％吗？ 我使用doctype作为： 在我的iframe代码中，如果我说： 我的意思是说，它实际上会占用其余页面的高度吗（因为顶部还有另一个固定高度为50px的框架），所有主流浏览器（IE / Firefox / Safari）都支持吗？ 关于滚动条，即使我说了，我也可以在Firefox中看到禁用的滚动条…如何完全隐藏滚动条并自动设置
-
问题内容： +--------------------+ | | | | | | | | | 1 | | | | | | | | | +--------------------+ | | | | | | | | | 2 | | | | | | | | | +--------------------+ 如上所示的（1）的内容是未知的，因为它在动态生成的页面中可能会增加或减少。如上所示，第二个div（
-
问题内容： 我通过设置找到了一种使div容器至少占据整个页面高度的方法。但是，当我添加一个嵌套div和set时，它不会扩展到容器的高度。有办法解决吗？ 问题答案： 这是一个已报告的Webkit（chrome /safari）错误，具有最小身高的父母的孩子不能继承height属性： : 显然Firefox也受到了影响（目前无法在IE中进行测试） 可能的解决方法： 添加位置：相对于#containme
-
问题内容： 我使用此 CSS将最大高度设置为 谁能给我一个普遍的答案， 和 之间有什么区别？ 问题答案： 这是W3Clink的解释： 以下算法描述了两个属性[min-height和max-height]如何影响’height’属性的使用值： 临时使用的高度是根据上面“计算高度和边距”下的规则计算的（不包括“最小高度”和“最大高度”）。 如果此暂定高度大于“最大高度”，则会再次应用上述规则，但是这次