3

フッターがあるページがあります：

postion: absolute;
bottom: 0;

ウィンドウの高さがコンテンツよりも大きい場合は正常に機能しますが、フッターがテキストの上に表示されるコンテンツよりも小さい場合は正常に機能します。入れてみます

body {
    min-height: 550px;
}

しかし、これでは問題は解決しません。スクロールすることはできますが、フッターはビューポートの下部に揃えられます (Android では、スクロールするとフッターがウィンドウの下部に移動します)。

スクロールバーがある場合、フッターをページの下部に揃えることはできますか?

ここ は 私のページです .

4

2 に答える 2

4

に追加position:relativeして、 、 not 、またはビューポート<body>に従ってフッター自体を配置します。<body><html>

body {
    position:relative;
}

このjsfiddleを参照し、「トグル」ボタンを使用して、<body>相対的に配置されたものと静的に配置されたものを切り替えて、違いを観察してください。

これは、position:absolute要素の位置自体が、その位置を「知っている」最も深い親に基づいているためです。MDNから:

位置指定要素は、計算された位置プロパティがrelative、absolute、またはである要素ですfixed。

于 2013-09-10T10:53:01.297 に答える