ヘッダーが固定されたページの下部にあるフッターを作成する

内容が小さすぎるとページの一番下にフッタを残したい（私のページの中央にフッタを見たくない）。

私はチュートリアルのこことそこには同じテクニカルを記述する（最低高さ：コンテナの100％のためのexpliciteの高さを持つ/ foot-as-the-pageのrel = "nofollow">フッターなど）。

私の実際のコンテンツは本体+ 130pxで始まる固定ヘッダーがあるため、これらのものはすべて動作しないということです

body{
  padding-top: 130px;
}

結果は、はい、私のフッターは底に座っていますが、私はまだ130pxスクロールすることができます。

すべてのチュートリアルと私が見る質問は固定ヘッダーではありません。

皆さん、ありがとうございました

 0
追加された
ビュー: 4
源
ro ru fr es pt de zh hi bn ar tr

2 答え

デフォルトモデルはコンテンツボックスにパディングトップを追加しています。 height：100％の要素に 100％+ 130px の高さを設定します。

So you have to add another <div> wrapper with auto height and add it padding-top: 130px;


<body style="height:100%; margin:0; position:relative;">
    <div id="wrapper" style="min-height:100%;">
        <div id="container" style="padding-top:130px; padding-bottom:130px;">
        </div>
    </div>
    <div id="footer" style="position:absolute; bottom:0; height:130px;">
    </div>
</body>
</html>
2
追加された
源
フッターは絶対的なので、そうです。だから、パディングボトムを追加する必要があります：[あなたのフッタの高さ]。 #containerで回答が編集されました。
追加された 著者 MatTheCat, 源
どういたしまして ;）
追加された 著者 MatTheCat, 源
最も確実な方法は#wrapperと<body>に背景色を適用することです。幅を設定する必要がある場合は#containerになります。
追加された 著者 MatTheCat, 源
これは、コンテンツがビューポートよりも小さい場合に機能します。そうでない場合は、130pxのコンテンツがフッターの下に表示されます。
追加された 著者 Thomas, 源
それは魅力のように働いています。手伝ってくれてどうもありがとう！
追加された 著者 Thomas, 源
私の身体はビューポートのサイズを持ち、背景色を持っているので、コンテンツがビューポートより大きかった場合、スクロールするときに色は空白になります。 html要素に背景色を追加して、その本文を透明にする必要がありました。
追加された 著者 Thomas, 源

フッターコンテナに margin-top：-130px; を追加してみてください。

0
追加された
源
動作しません。問題はフッタだけではなく、コンテンツの詳細です
追加された 著者 Thomas, 源