bootstrap粘性頁腳與響應內容

當您知道頁腳的高度時，粘性頁腳有一個簡單的解決方案。 http://getbootstrap.com/examples/sticky-footer/bootstrap粘性頁腳與響應內容

但當頁腳高度可以改變我們如何解決粘頁腳

2014-07-01 Tzook Bar Noy

其實，在你給的例子，有沒有一個明確的高度上設置頁腳。它正在擴展到它的內容。 – joshboley

@joshboley居然有一個高度。它在'.footer'上。現在它被設置爲60px。你只需要改變它。 – Aibrean

如果你不知道頁腳刪除「高度：60像素」的理想高度，從.footer類。頁腳高度現在將擴大以適應其內容。

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background-color: #f5f5f5; 
}

您還需要動態設置頁邊的底部邊距，使其不會在絕對定位的頁腳下滑動。你可以用javascript來做到這一點。 jQuery的例子：

$(function(){ 
    var footerHeight = $(".footer").height(); 
    $("body").css("margin-bottom", footerHeight); 
    $(".footer").css("margin-top", -footerHeight); 
});

這裏舉例： http://codepen.io/anon/pen/tFcJr

還有2種方式實現一個棘手的註腳。使用表格：http://codepen.io/anon/pen/AlnHc 使用flexbox：http://codepen.io/anon/pen/qysLg。我不知道這些如何與引導玩耍，但顯然Flexbox只支持IE10 +。

來源

2014-07-01 17:30:37 ElwoodP

是的，但是現在如果頁面的內容將比屏幕高度更長，所以它會重疊，因爲我們沒有將邊距從身體放到頁腳 –

好點子。我已經修改了我的答案。 – ElwoodP

嗯，我尋找一個只有CSS的解決方案，但這仍然有效，所以我會將其標記爲其他人 –

如果您檢查您所提到的頁面的源代碼，你會看到有實際評論告訴你什麼如何改變頁腳高度：

body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 60px; 
} 

.footer { 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
}

來源

2014-07-01 17:30:03 Renato

我知道我的意思是當你在頁腳中有動態內容，所以你不能在css中指定高度 –

那麼你只需要把height：auto; – EdwardM

高度確定....但是邊距怎麼樣... –

這裏的自舉實例代碼：

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
}

你會改變高度屬性...

.footer { 
    height: auto; 
}

來源

2014-07-01 21:46:31 EdwardM

頁腳的高度不是問題。身體的邊緣是問題 –

bootstrap粘性頁腳與響應內容

回答

相關問題