正在构建一个网站,我有一个顶部栏,它贴在屏幕顶部,然后在下面我有一个 Iframe,仅此而已。问题如下,我的top bar是50px高度,我希望iFrame是100%-50px。有没有办法在 CSS 中做到这一点?如果没有,你将如何使用 javascript 来实现? (我不知道获取窗口大小的函数)。
|------------顶栏------------| 50px
|_______________< em>_______| 100%-50px
\iframe
\iframe
\
\
\
\
最佳答案
不需要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,那太过分了。
注意:这适用于所有浏览器
关于javascript - HTML/CSS 高度 100% 和 px,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17493848/