0

この jsFiddle を作成しようとしましたが、問題を再現することはできません。問題は、webkit (XP の Chrome、または iOS の Safari) で次のページを開くと、3 番目 (青) の 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％の高さが定義されているため、divAは100％+ div Cになり、divCが画面の下部から外れます。

于 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 に答える