4

私は本当に難しいCSSの問題を抱えています。私は次のレイアウトを持っています (これはペイントでの高速モックアップです):

http://i.imgur.com/SwxCYbJ.png

赤い箱をコンテナの底に浮かべる必要があります。通常は使用しますposition: absolute; bottom: 0;が、その結果、テキストが div と重なってしまいます。これは望ましくありません。ボックスが 2 番目の画像のように動作するようにします (同じ状況ですが、テキストが増えます)

これは可能ですか？非常に古いブラウザのサポートをダンプしてもかまいません。

4

2 に答える 2

16

放棄しないでくださいposition: absolute。フッター div の高さに等しいパディングをコンテナーの下部に追加するだけです。

#outer{
    position: relative;
    padding-bottom: 55px;
}

#foot{
    position: absolute;
    height: 55px;
    width: 100%;
    bottom: 0;
    left: 0;
}

パディングなし: http://jsfiddle.net/cG5EH/2

パディングあり: http://jsfiddle.net/cG5EH/1

于 2013-09-23T21:33:27.753 に答える