Demo

Question

建立一个网站，我有一个顶部栏贴在屏幕的顶部，然后在下面我有一个Iframe，这就是全部。问题如下，我的顶栏高度为50px，我希望iFrame为100％-50px。有没有办法在CSS中做到这一点？如果没有，你会用javascript做什么？（我不知道获取窗口大小的函数。）

| -------------顶栏------------- | 50像素
|的 _ __ _ __ _ __ _ __ _ __ < EM> _ __ _ ___ | 100％-50px
\ IFRAME
\ IFRAME
\
\
\
\

Answer 1

有办法！

在CSS中使用此功能：min-height: calc(100% - 50px);

min-height这里就可以了。如果没有min，则max-height会将其作为100% - 50px，并且不会扩展其高度，直到其内容达到{{1}}。

Fiddle.

Answer 2

使用： -

#iframeid{
height: -moz-calc(100% -  50px);
height: -webkit-calc(100% - 50px);
height: calc(100% - 50px);
}

Answer 3

在css中给你的iframe填充顶部：50px

像这样

iframe {
    padding-top:50px;
 }

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

Answer 4

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

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

Answer 5

您可以使用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
}

Demo

给我几分钟，然后解释一切。

这是我能想到的唯一可以在IE8 +中运行的方式否则就是javascript

HTML / CSS高度100％和px

5 个答案:

Demo