1

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

|-------------顶栏-------------| 50像素
| _ __ _ __ _ __ _ __ _ __ _ __ _ ___ | 100%-50px
\iframe
\iframe
\
\
\
\

4

5 回答 5

0

有办法！

在 CSS 中使用这个函数：min-height: calc(100% - 50px);

这里min-height会做的伎俩。没有min它，它将把它作为 amax-height并且不会扩展它的高度，直到它的内容达到100% - 50px。

小提琴。

于 2013-07-05T17:11:02.243 回答
0

用这个：-

#iframeid{
height: -moz-calc(100% -  50px);
height: -webkit-calc(100% - 50px);
height: calc(100% - 50px);
}
于 2013-07-05T17:12:12.413 回答
0

在 css 中给你的 iframe 一个 padding-top: 50px

像这样

iframe {
    padding-top:50px;
 }

或者你可以给你的 iframe 一个类并定义 padding-top: 50px; 在那里

于 2013-07-05T17:12:22.980 回答
0

不需要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，那只是矫枉过正。

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

于 2013-07-05T17:14:00.067 回答
0

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

于 2013-07-05T17:22:25.110 回答