iframe身体内部高度100％，带填充

一尘不染

iframe身体内部高度100％，带填充

css

我的HTML文档中有一个iframe，但遇到了一些麻烦。

我还在页面顶部有一个URL栏（固定位置元素），当用户滚动时，URL栏应随用户使用。很好我希望iframe可以填充剩余空间，但不会被网址栏覆盖。

这就是我在说的。http://s75582.gridserver.com/Ls

如何解决此问题，以使URL栏不覆盖页面的一部分？当我尝试在主体中设置padding时，它只会创建一个额外的，令人讨厌的滚动条。

阅读 266

2020-05-16

共1个答案

一尘不染

虽然您在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后备广告来使多余的滚动条消失。

2020-05-16