正在构建一个站点，我有一个顶部栏，它贴在屏幕顶部，然后在下面我有一个 iframe，仅此而已。问题如下，我的顶栏是 50px 高度，我希望 iFrame 是 100%-50px。有没有办法在 CSS 中做到这一点？如果没有，您将如何使用 javascript 来实现？ （我不知道获取窗口大小的函数）。
|-------------顶栏--------------| 50像素
|______________________| 100%-50像素
\iframe
\iframe
\
\
\
\
【问题讨论】：
box-sizing
标签： javascript html css web height
不需要javascript。 使 iframe 高度为 100%；并在顶部添加填充以偏移顶部栏。
iframe{ padding-top:50px; height:100%;
box-sizing:border-box; moz-box-sizing:border-box }
关键属性是box-sizing。使元素高度100% 将按照它的假设进行，但是任何其他填充只会增加高度或宽度的大小，具体取决于您如何填充它。但是如果你设置box-sizingborder-box，这将迫使浏览器不增加高度或宽度，而是从高度或减去（即'100%-50px'）或宽度。
长话短说，box-sizing 是您的 CSS 中缺少的功能。 不需要 JAVASCRIPT，那就太矫枉过正了。
注意：这适用于所有浏览器
【讨论】：
使用这个：-
#iframeid{
height: -moz-calc(100% - 50px);
height: -webkit-calc(100% - 50px);
height: calc(100% - 50px);
}
【讨论】：
在 css 中给你的 iframe 一个 padding-top: 50px
喜欢这个
iframe {
padding-top:50px;
}
或者你可以给你的 iframe 一个类并定义 padding-top: 50px;在里面
【讨论】：
有办法！
在 CSS 中使用这个函数：min-height: calc(100% - 50px);
这里的min-height 可以解决问题。如果没有min，它将把它当作max-height，并且不会扩展它的高度，直到它的内容达到100% - 50px。
【讨论】：
max-height 以及^
您可以使用 box-sizing 和 padding 来做到这一点
这是我想出来的
<div id="top-bar"></div>
<iframe src="http://www.jsfiddle.net" frameborder="0"></iframe>
*{
box-sizing:border-box; // box sizing allows us to add 50px padding to the iframe
-webkit-box-sizing: border-box; // Without effecting the size
-moz-box-sizing: border-box;
margin:0;
}
#top-bar{
height:50px; // Height of top bar
position:fixed; // Fixed
background:skyblue;
top:0;
left:0;
right:0;
}
iframe{
padding-top:50px; // Height of top bar
height:100%;
width:100%;
margin:0;
}
body, html{
height:100%;
width:100%;
overflow:hidden; // There was like 10px of empty overflow at the bottom
// i will find out why
}
给我几分钟，我把一切都解释清楚。
这是我能想到的唯一一种适用于 IE8+ 的方法 否则就是javascript
【讨论】：