無法在底部推腳註

我想將底頁推到底部，但是在我的佈局中它位於頂部。無法在底部推腳註

這是我的代碼。

樣本結構

<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：bolute;底部：0像素; –

你應該更喜歡使用粘腳。這裏有五種不同的方式來做到這一點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請使用'min-height'而不是HTML中的高度 –

並將'position：relative;'添加到html中 –

正確地關閉你的css正文括號。另請參閱其他網站並瞭解如何編寫/編碼CSS。現在，請考慮以下內容。

請勿使用絕對。相反，使用相對位置。用於放置內容相對於其正常位置的相對位置。用於將內容放置到最近的定位祖先的絕對位置。有三種類型的頭寸：固定，相對，絕對和靜態。

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

無法在底部推腳註

回答

相關問題