5

フッターのスタイルを設定する方法はありますか? コンテンツがある場合 (ブラウザの高さよりも大きい) はページの下部 (非表示) になりますが、十分なコンテンツがない場合は下端に貼り付けられますブラウザ？

4

3 に答える 3

7

私が使用する 1 つのソリューションでは、フッターの既知の高さが必要です。

フィドル:

たくさんのコンテンツ

ちょっとした内容

HTMLは次のとおりです。

<main>
  hello
</main>
<footer>
  i am the footer
</footer>

CSS は次のとおりです。

html, body {
    height: 100%;
}
main {
    min-height: 100%;
    margin-bottom: -100px;
    background: #ddd;
}
main:after {
    content: "";
    display: block;
    height: 100px;
}
footer {
    height: 100px;
    background: #eee;
}

秘訣は、ドキュメントの主要部分をmin-height100% に設定することです。この要素には、ページ上の他のすべてが含まれている必要があります。私の例では、main要素を使用しました。

次に、この要素にフッターの高さに等しい負のマージンを与えます。これにより、下部にフッター用のスペースを残すのに十分なだけ上に移動します。

パズルの最後のピースはafter要素です。これは、その負のマージンのスペースを埋めるために必要です。そうしないと、のコンテンツがmainフッターにオーバーフローします。

于 2013-10-04T23:27:59.750 に答える
1

これを読むことをお勧めすることしかできません。
ページの下部にある場合はフッターを表示するか、ページが短い場合はフッターを表示します

またはこれ
http://css-tricks.com/snippets/css/fixed-footer/

于 2013-10-04T23:27:52.720 に答える