フッターを下に押し込むことができません

私はフッターページを下に押し込もうとしていますが、私のレイアウトではトップページにあります。フッターを下に押し込むことができません

ここに私のコードです。

サンプル構造

<body> 
<!-- some codes here --> 
<footer> 
    <div id="main-footer"> 
     <div class="col-md-8 col-md-offset-2"> 
      <h1>hello world</h1> 
     </div> 
    </div> 
</footer> 
</body>

CSS

body { 
    font-family: Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif; 
    font-weight: 300; 
    position: relative; 

    footer { 
     position: absolute; 
     bottom: 0; /** no effect **/ 
     min-height: 500px; 
     background: #000; 
     width: 100%; 
     z-index: 4; 
     /** top: 0; -- if enabled my footer goes on the top **/ 
    } 

}

--- CSSを更新---

html { height: 100%; } 
body { 
    font-family: Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif; 
    font-weight: 300; 
    min-height: 100%; 
} 

footer { 
    height: 100px; 
    background: red; 
    z-index: 5; 
    position: absolute; 
    width: 100%; 
    min-height: 100px; 
    bottom: 0; 
}

私は全身が占めることになるかどうかをチェックしてみてください高さを100％に設定してもここでの出力です：

あなたはそれが私のページ全体を占有していない見ることができるように。

出典

2017-05-04 Jerielle

は本当に 'body'の' footer'の 'css'ですか？ – Swellar

タグは正しく閉じられません。psotionを使用するのではなく、スティッキーフッターを試してください。下：0px; –

あなたは粘着性のあるfooteを好むべきです。ここには5つの異なる方法があります。https://css-tricks.com/couple-takes-sticky-footer/ –

あなたのコードには以下のCSSを使用してください。うまくいくかもしれません。

html { 
    min-height:100%; 
    position:relative; 
    height:auto; 
} 

body { 
    padding-bottom:500px; 
} 

footer { 
    position: absolute; 
    bottom: 0; /** no effect **/ 
    min-height:500px; 
    background: #000; 
    width: 100%; 
    z-index: 4; 
}

出典

2017-05-04 06:15:00

私は100％のHTMLをチェックすると、それは私のページの全体の高さを占めていない:( – Jerielle

@Jerielleは、HTMLの高さの代わりに 'min-height'を使用してください –

htmlに 'position：relative;'を追加する –

あなたのcssボディブレースを正しく閉じます。また、他のウェブサイトを参照し、CSSの記述方法やコード方法を学んでください。今のところ、次の点を考慮してください。

絶対使用しないでください。代わりに、相対位置を使用します。コンテンツを通常の位置に配置するために使用される相対位置。コンテンツを最も近い位置にある祖先に配置するために使用される絶対位置。ポジションには、固定、相対、絶対、および静的の3種類があります。

body { 
    font-family: Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif; 
    font-weight: 300; 
    position: relative; 
} 
footer { 
    position: relative; 
    bottom: 0; /** no effect **/ 
    min-height: 500px; 
    background: #000; 
    width: 100%; 
    z-index: 4; 
    /** top: 0; -- if enabled my footer goes on the top **/ 
}

出典

2017-05-04 06:18:19

フッターを下に押し込むことができません

答えて

関連する問題