Question

我有一个容器，里面有4个div。我的容器被拉伸以填满整个窗口。在IE中，如果您重新调整窗口大小，则所有内容都会正确地重新调整大小，并且容器周围的所有4个边距都可见。我试图在FF中获得相同的行为，但我似乎找不到合适的CSS配方。

注意，如果您通过HTML和CSS代码并检查IE中的行为，我试图在FF中实现相同的行为。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>IE AutoResize</title>


<style type="text/css" media="screen">

html {
     height:100%;
     width:100%;
     overflow: hidden;
     margin-bottom:40px;
}

body {
     height:100%;
     margin-top: 10px;
     margin-left: 10px;
     margin-right: 10px;
}

#container{
     background-color:#808080;
     height: 100%;
     Valignment-adjust: central;
     padding: 10px 10px 10px 10px;
}

#top {
     background-color:#00FF80;
     height: 10%;
}

#left {
     background-color:#FF8000;
     float:left;
     width: 20%;
     height:80%;
}

#right {
     background-color:#3944C6;
     width: 80%;
     height:80%;
     float:right;
}

#bottom {
     clear:both;
     background-color:#FF0000;
     height: 10%;
}
</style>



  </head>
  <body>

     <div id="container">
           <div id="top">top</div>
           <div id="left">left</div>
           <div id="right">right</div>
           <div id="bottom">bottom</div>
     </div>

  </body>
</html>

Answer 1

我担心这是IE错误的另一个案例，而且FF正确。您不能拥有100％的高度，然后有额外的边距或填充顶部或底部，您将需要找到另一种方式。如果您可以发布您的HTML或链接，我们可以进一步指导。

Firefox，不会自动调整容器高度：100％，底部边距丢失！

1 个答案: