HTML/CSS高度100%和像素

HTML/CSS Heigth 100% and px

本文关键字：像素 100% 高度 CSS HTML      更新时间：2023-09-26

我正在构建一个网站，我有一个顶部的栏，它粘在屏幕的顶部，然后在下面我有一个子框架，仅此而已。问题如下，我的顶部栏是50像素高，我希望iFrame是100%-50像素。有没有一种方法可以在CSS中做到这一点？如果没有，您将如何使用javascript？（我不知道获取窗口大小的函数）。

|-------------顶栏---------------|50px
|_____________________|100%-50px
''iframe
''iframe
''
''
''
''

不需要javascript。使iframe高度达到100%；并在顶部添加填充以偏移顶部条。

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

密钥属性为CCD_ 1。使元素高度为100%将按照其假设的方式进行，但任何其他填充都只会增加高度或宽度的大小，具体取决于填充方式。但如果使box-sizing为border-box，则会迫使浏览器不要增加高度或宽度，而是从高度或宽度中取或减（即'100%-50px'）。

长话短说，box-sizing是css中缺少的功能不需要Java脚本，那就太过分了。

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

使用此：-

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

给css中的iframe一个填充顶部：50px

像这个

iframe {
    padding-top:50px;
 }

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

有办法！

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

这里的min-height会起作用。如果没有min，它将把它作为max-height，并且不会扩展它的高度，直到它的内容达到box-sizing0。

Fiddle。

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

相关文章：