Javascript HTML/CSS高100%和px

我正在建设一个网站，我有一个顶部的栏，贴在屏幕的顶部，然后在下面我有一个Iframe，仅此而已。问题如下，我的顶栏是50px高度，我希望iFrame是100%-50px。有没有一种方法可以在CSS中实现？如果不是，您将如何使用javascript来实现它？（我不知道获取窗口大小的函数）

|-------------顶栏------------------50px
|\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu \iframe
\iframe
\
\
\
\有办法

在CSS中使用此函数：

min height:calc（100%-50px）

这里的
min height
就可以了。如果没有该
min
值，它将把该值作为
max height
，并将not扩展其高度，直到其内容达到
100%-50px

使用以下方法：-

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

为css中的iframe提供一个填充顶部：50px

像这样

iframe {
    padding-top:50px;
 }

或者您可以给iframe一个类并定义padding top:50px；在那里
不需要javascript。
使iframe高度达到100%；并在顶部添加填充以偏移顶部栏

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

关键属性是
框大小
。使元素高度
100%
与假设的一样，但任何其他填充都只会增加高度或宽度的大小，具体取决于填充方式。但是，如果您对框大小进行调整，这将强制浏览器不增加高度或宽度，而是从高度或宽度中获取或减去（即“100%-50px”）

长话短说，
框大小
是css中缺少的功能不需要JAVASCRIPT，那太过分了

注意：这适用于所有浏览器
您可以使用
框大小调整
和
填充

这是我想到的

<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
}


*{
框大小：边框框；//框大小允许我们向iframe添加50px的填充
-webkit框大小：边框框；//不影响大小
-moz框大小：边框框；
保证金：0；
}
#顶杆{
高度：50px；//顶杆高度
位置：固定；//固定
背景：天蓝色；
排名：0；
左：0；
右：0；
}
iframe{
填充顶部：50px；//顶部条的高度
身高：100%；
宽度：100%；
保证金：0；
}
正文，html{
身高：100%；
宽度：100%；
溢出：隐藏；//底部有大约10px的空溢出
//我会找出原因的
}

给我几分钟，我会解释一切

这是我能想到的在IE8+中工作的唯一方法
否则就是javascript，然后恼人的滚动条就会出现在我们美丽的网站上-_-不要紧，这是他想要的效果，由于iframe上的填充，其中的任何内容都不会被顶部的barThanks重叠！它起作用了，我只需要把填充物放在底部而不是顶部！每个人都有自己的。。你应该接受答案，这样问题才可以被认为是答案。这在IE 8或更早版本、safari 6或更早版本中不起作用。。。您是否希望它是
max height
以及^apply'margin top'或'position:relative；顶部：对框架有一些价值那么，你对你收到的4个答案有什么疑问吗？检查我的编辑，我完全忘记了框大小的问题，是的，但它得到了IE9和更高版本的支持，这是目前最常用的版本。你不应该根据你的意见构建应用程序。看看杰伊好吧，你是对的。但当我得知IE9已经超过了chrome:O？？？@Vivek微软是一家垄断企业，每台新的windows电脑都预装了IE8、9或10。一般来说，当我们查看开发者网站上的浏览器统计数据时，我们作为开发者几乎完全使用chrome