Question

我在我的网站上有这个代码，它在firefox中完美运行，但chrome无法以任何方式使其在chrome中运行。我试图把iframe放在高度：95％，但不准确。注意：在iframe的高度jsFiddle看起来很糟糕（不知道为什么）

在Chrome中： In chrome

在Firefox中： In firefox

<html>
<body>
<header>
</header>
<nav>
</nav>
<content>
<div style="padding-left:180px;padding-top:45px">
<iframe src="http://message2space.es.vu" name="c" id="c" frameborder="0"></iframe>
</div>
</content>
</html>
<!-- and the css: --!>
header{
   z-index:100000001;
   height:45px; 
   width:100%;
   background: -webkit-linear-gradient(#A9A9A9, #797979);
   background: -moz-linear-gradient(#A9A9A9, #797979);
   background: -o-linear-gradient(#A9A9A9, #797979); 
   left: 0px; 
   position: absolute; 
   top: 0px;
   background-color:#A9A9A9
}
nav{
    position:absolute;
    top:0px;
    left:0px;
    z-index:10000000;
    background-color: #424242;
    height:100%;
    width:180px;
}
content{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%
}
iframe{
    width:100%;
    height:100%
}

http://jsfiddle.net/gsu2H/1/

Answer 1

我会说Chrome显示屏是正确的。因为你试图给出100％的高度以及45px的偏移量。

一个简单的解决方案是使用box-sizing来更改元素的CSS框模型，所以只需更改此行：

<div style="padding-left:180px;padding-top:45px">

要：

<div style="box-sizing:border-box;padding-left:180px;padding-top:45px;height:100%">

您希望在-moz-中添加box-sizing供应商前缀，因为Firefox doesn't support已经是W3C版本了。

iframe的长度

1 个答案: