HTML/CSS頁腳不堅持底部移動在屏幕上調整大小

我有以下嘗試，試圖做一個簡單的粘腳。HTML/CSS頁腳不堅持底部移動在屏幕上調整大小

我的問題是頁腳不是底部，我懷疑這可能是一個CSS問題。

非常感謝，如果有人可以給以下代碼掃描並提供一些建議。

#footer { /* position must be absolute and bottom must be 0 */ 
    height: 100px; 
    width: 100%; 
    background: red; 
    position: absolute; 
    bottom: 0; 
} 
    <footer class="footer" id="footer"> 
    <div class="footLeft" style="width:75%; float:left;"> 
    </div> 
    <div class="footerRight" style="width:25%; float:right; padding:25px;"> 
     <button class="btn btn-danger" style="font-size:20px;">Sign Up</button> 
    </div> 
    </footer>

的問題林具有/輸出

來源

2017-02-25 Timothy Coetzee

你相對於身體標記位置給出。如果您可以分享演示網址，以便我們可以對其進行評估，那將會很棒。你的頁腳屬性很好。我想這個問題必須與相對容器 –

正如你所看到的位置屬性設置爲'位置：絕對'沒有額外的包裝頁腳 –

@TimothyCoetzee你的'身體'CSS看起來像什麼？你是否曾嘗試添加'body {min-height：100vh;}'，假設你想讓身體至少保持視口的高度？ –

添加以下規則體

body { 
    min-height:100%;/*or 100vh */ 
    position:relative; 
}

說明：

min-height屬性將確保身體至少佔用視口高度的100％。這種方式即使你的內容較少，頁腳也會始終粘貼在視口的底部。

Position: relative規則設置，使得頁腳的位置相比絕對的身體，而不是任何其他包裝

來源

2017-02-25 05:33:08

Kiran Dash工作！你介意給出一個解釋，爲什麼我必須在身體上設置最小高度屬性..？ –

當然。我會解釋並更新答案。很高興它幫助 –

我已經更新了答案。希望有所幫助。如果它解決了你的問題。請確保將其作爲正確答案進行檢查。祝你有美好的一天 –

你可以使用這個原生類來實現粘頁腳bootstrap--

<div class="footer navbar-fixed-bottom">

來源

2017-02-25 05:34:06 neophyte

另一種可能是使用position:fixed，而不會影響正文css。在這種情況下，頁腳將在活動頁面的底部總是如果滾動條總是存在

例

#footer { /* position must be absolute and bottom must be 0 */ 
    height: 100px; 
    width: 100%; 
    background: red; 
    position: fixed; 
    bottom: 0; 
}

見fiddle

來源

2017-02-25 05:41:10 Massimo

HTML/CSS頁腳不堅持底部移動在屏幕上調整大小

回答

相關問題