0

我试图为此创建一个 jsFiddle，但它无法重现我的问题。问题是，当我在 webkit（XP 上的 Chrome 或 iOS 上的 Safari）中打开以下页面时，第三个（蓝色）div 位于页面底部，而我想要的是它位于底部。

我知道我应用了一些不必要的样式；那是因为我已经从需要设置这些属性的页面中尽可能地简化了它，并且删除会停止重现问题。

页面代码为：

<html>
  <head>
    <style type="text/css">
      body {
        margin: 0;
      }
      .A {
        background: red;
        float: left;
        -webkit-transform-style: preserve-3d;
      }
      .B {
        background: green;
        height: 100%;
      }
      .C {
        background: blue;
        position: fixed;
        bottom: 0px;
      }
    </style>
  </head>
  <body>
    <div class="A">
      1
      <div class="B">
        2
      </div>
      <div class="C">
        3
      </div>
    </div>
  </body>
</html>
4

2 回答 2

1

将您的height: 100%从移动.B到.A

问题是你的包含元素（div A）没有定义高度，所以会自动调整大小以适应它的内容。div B 嵌套在其中并定义了 100% 的高度，因此 div A 将是 100% + div C，导致 div C 离开屏幕底部。

于 2012-05-18T12:51:21.063 回答
0

将此类应用于要在页面底部显示的最后一个 div

.footer
 {
    width:100%;
    height:30px;
    float:left; 
    z-index:999;
    text-align: center;
    line-height:30px;
    position:fixed;
    bottom:0px;

}

于 2012-05-18T12:52:00.367 回答