'm建立一个网站，我有一个顶尖的酒吧，坚持屏幕的顶部，然后下面我有一个iframe，就这些。问题如下，我的顶栏是50px高度，我想iFrame是100％-50px。有没有办法在CSS中做到这一点？如果不是，你会如何使用JavaScript？（我不知道获得窗口大小的函数）。HTML/CSS Heigth 100％和px

| ------------- top bar ------------- | 50px
| _ __ _ __ _ __ _ __ _ __ _ __ _ ___ | 100％-50px
\ IFRAME
\ IFRAME
\
\
\
\

来源

2013-07-05 Jo Colina

申请“的margin-top”或“位置：亲属;顶部：some_value_”帧 –

所以，你有什么关于您收到的4个答案的问题？ – iConnor

检查我的编辑，我完全忘了'box-sizing' –

有没有必要的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没有必要，这只是矫枉过正。

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

来源

2013-07-05 17:14:00

，然后令人讨厌的滚动条弹出到我们美丽的网站。 -_- –

无关紧要，他想要的效果，由于iframe上的填充，其中的任何内容都不会被顶部栏重叠 –

谢谢！它的工作，我只需要填充底部而不是顶部！ –

有一种方法！

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

的min-height这里会做的伎俩。如果没有这个min它将把它作为max-height并将而不是扩大其高度，直到其内容达到100% - 50px。

Fiddle.

来源

2013-07-05 17:11:02

这不适用于IE 8或更早版本，Safari 6或更早版本... https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc –

你不希望它成为'max-height'以及^ – iConnor

使用此： -

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

来源

2013-07-05 17:12:12

为什么你复制了？ –

我没有。只需比较你的代码与我的。 –

你应该注意到，这在IE 8或更早版本中不起作用 –

给你的iframe中的CSS填充顶：50px的

这样

iframe { 
    padding-top:50px; 
}

或者你可以给你的iframe一个类并定义填充顶部：50px;在那里

来源

2013-07-05 17:12:22 MaxK

您可以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

来源

2013-07-05 17:22:25 iConnor

HTML/CSS Heigth 100％和px

回答

Demo

相关问题