javascript - HTML/CSS 高度 100% 和 px

Question

正在构建一个网站，我有一个顶部栏，它贴在屏幕顶部，然后在下面我有一个 Iframe，仅此而已。问题如下，我的top bar是50px高度，我希望iFrame是100%-50px。有没有办法在 CSS 中做到这一点？如果没有，你将如何使用 javascript 来实现？ (我不知道获取窗口大小的函数)。

|------------顶栏------------| 50px
|_______________< em>_______| 100%-50px
\iframe
\iframe
\
\
\
\

Answer 1

不需要javascript。使 iframe 高度为 100%；并在顶部添加填充以抵消顶部栏。

 iframe{  padding-top:50px; height:100%; 
          box-sizing:border-box; moz-box-sizing:border-box }

关键属性是box-sizing。使元素高度 100% 将按照预期的方式运行，但任何其他填充只会增加高度或宽度的大小，具体取决于您如何填充它。但是如果你制作 box-sizing border-box，这将强制浏览器不增加高度或宽度，而是取或减(即 ' 100%-50px') 从高度或宽度。

长话短说，box-sizing 是您的 CSS 中缺少的功能。 不需要 JAVASCRIPT，那太过分了。

注意:这适用于所有浏览器