1

HTMLの本文に、本文を水平方向に埋めるフッターが必要です。

私はこのようなhtmlを持っています：

<body>
    <div class="footer"></div>
</body>

そしてこのようなCSS：

body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}
body .footer {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: auto;
    padding: 10px;
}

ドキュメントによると、divで使用するdisplay:blockと、このdivはデフォルトで親を水平方向に埋めます。理由はわかりませんが、ここでは発生していません。だから私はこのようにCSSを変更しました：

body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}
body .footer {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: auto;
    padding: 10px;
}

width:100%ここで、aに加えて問題となるのpadding:10pxは、もちろん親よりも20px大きいdivが生成され、水平スクロールバーが表示されることです。

その権利を達成するための標準的な方法はありますか？

4

2 に答える 2

4

3つの方法があります：

水平方向のパディングなし：

padding: 10px 0;

絶対に右側にも配置：

right: 0;

または、フッターのボックスサイズを変更します。

box-sizing: border-box;

ボックスサイズの詳細については、http：//css-tricks.com/box-sizing/を参照してください。

于 2012-11-16T19:05:09.730 に答える
2

これは、divに。があるためかもしれないと思いますposition:absolute。right:0px;のスタイルに追加してみてくださいbody .footer。それが重要な場合でも、IE6では機能しないと思います。

私のjsfiddleを参照してください（可視性のためにdivに赤い背景を追加しました）：http：//jsfiddle.net/jdwire/BtnXe/

于 2012-11-16T19:05:12.470 に答える