6

以前に見たことがあり、行ったことがあるので、かなり一貫して機能することはわかっていますが、それが有効かどうか、および私が考えていなかった警告があるかどうかを知りたい.

例: http://jsfiddle.net/sfctB/67/最近 FF オーバーフローの問題を抱えている人に、この修正を提供しました。これは、box-sizing プロパティが原因でした。単純な -moz- プレフィックスを追加することでも修正されましたが、私にとってより有効と思われるものを選択しました。コンテンツ div の上部と下部を設定して、固定ヘッダーと固定フッターの間で常に伸びるようにします。次に、オーバーフローを避けるためにマージンを設定します。

上下や左右を同時に使用すると問題が発生すると直感的に思いますが、すでに述べた左がある場合に右を幅のように動作させ、下をそのように動作させるようですすでにトップが記載されている場合の高さ。

しかし、これは有効で、長期サポートを検討する場合に使用する必要がありますか?

コード

html, body {
    height:100%;
    width:100%;
    overflow:hidden;
}
body {
    padding: 60px 0px;
    height: 100%;
}
.header {
    height:60px;
    background:#000;
    color:#fff;
    width: 100%;
    position: fixed;
    top:0;
}
.body {
    overflow-y: scroll;
    position:fixed;
    bottom:0;
    top:60px;
    margin: 0 0 60px 0;
}
.footer {
    height:60px;
    background:#000;
    position:fixed;
    bottom:0px;
    width:100%;
    color:#fff;
}



<!DOCTYPE html>
<html>

    <head></head>

    <body>
        <div class="header">This is header</div>
        <div class="body">[content here]</div>
        <div
        class="footer">This is footer</div>
    </body>

</html>
4

2 に答える 2

12

良い質問。これについては長い間疑問に思っていたので、仕様（http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-widthおよびhttp：//www。 w3.org/TR/CSS2/visudet.html#abs-non-replaced-height）。それは完全に綴られているように見え、答えはあなたがそれを期待するものです。絶対位置の要素の場合、幅が「自動」で、左右が定義されている場合、次のようになります。

5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'

同様に高さについて：

5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'

ただし、tPlummerは良い点だと思います。仕様と現実は2つの異なるものかもしれません。特に古いブラウザに関しては。

于 2013-01-28T20:29:44.950 に答える
0

私に関する限り、それは有効なマークアップです。IE で属性に問題があるのを見てきましpaddingたが、それもほとんどの場合 IE です。

于 2013-01-28T20:01:40.543 に答える