引導全高度與粘性頁腳
[英]Bootstrap full height with sticky footer
問題描述
當內容不夠時，我遇到一個小問題，試圖覆蓋瀏覽器窗口的整個高度。 我在Orchard CMS中使用bootstrap，這有任何相關性。
問題可以在這里看到
頁面結構非常基本：
<body style="background-color: #b0a2b0;">
<div id="layout-wrapper" style="margin: 0px auto -75px; padding: 0px 0px 75px;">
<div class="container">
.... stuff ...
</div>
<div class="container">
... other stuff
</div>
</div>
<div id="footer" style="height: 75px;">
<div class="container">
</div>
</div>
</body>
html ， body和#layout-wrapper都將高度設置為100％。 直到現在我的聰明想法是添加一個額外的容器並相應地調整它的大小。 問題是我需要在窗口調整大小時注意，並且如果頁面上有東西隱藏或顯示（因為這會改變可用高度）。
我已經嘗試將此填充div設置為height: 100%但它似乎從頁腳開始，最終基本上比頁面長，向下滾動最終向上拖動頁腳。
作為最終結果我喜歡的是一個粘貼到底部的頁腳，即使有大小調整或顯示/隱藏的頁面，頁面也是全長的。
有任何想法嗎？
3 個解決方案
解決方案1
5 已采納 2014-06-04 09:39:24
感謝大家，主要是為了提示我正確的搜索方向。 我在SO上找到了這個很棒的答案： CSS 100％高度，填充/邊距
基本上我給了我的垂直填充物以下CSS：
.verticalFiller {
display:block;
position:absolute;
height:100%;
bottom:0;
top:0;
left:0;
right:0;
z-index: -9999;
}
這將使填充物成為位於所有.container后面的全高度div並顯示所需的白色部分。
解決方案2
0 2014-06-03 16:25:30
對於純CSS解決方案：使頁腳的位置絕對，將top值設置為100％，並將頁邊距設置為負高度，以便頁面在頁面底部正上方顯示height 。 我也發現縮小身體會有所幫助。
body {
height:95%;
}
.footer {
position:absolute;
top:100%;
height:20px;
margin-top:-20px;
width:100%;
}
編輯：
剛剛意識到如果頁面不是全長，你想要頁腳移動。 在我的網站上，我確保背景顏色一致，所以頁腳看起來不合適，否則我想JS解決方案會更好地考慮這種事情。
解決方案3
-2 2014-06-03 16:23:56
好吧，我們解決這個問題的方式是JS。 在我們的布局上，我們總是包含一個小的JS代碼，可以在文檔准備就緒時進行檢查，並且還可以綁定到屏幕調整大小事件。
基本上，我們有一個容器，我們輸出我們的內容。 因此，我們檢查用戶的屏幕高度
$(window).height();
如果此大小小於content + footer + header; 然后我們必須調整容器高度，如下所示：container.hegiht = screen.height - （footer.height + header.height）
只是為了讓它更柔和，我們應用動畫。
檢查代碼（JS）：
function(container){
var footer = $('.footer').height();
var header = $('.navbar').outerHeight() + parseInt($('.navbar').css('margin-bottom'));
var screenHeight = $(window).height();
if ( ! ( screenHeight < ( (container.outerHeight() + parseInt(container.css('margin-bottom')) ) + footer + header) ) ) {
// If it is, resize container
// container.height( screenHeight - (header + footer ) );
var height = screenHeight - (header + footer );
container.animate({height: height }, 500);
}
}
這是我們的方式，到目前為止非常好。
只是不要忘記在DOM上調用此函數 - 就緒並在窗口調整大小。
希望能幫助到你 ！
將自舉粘貼頁腳與全高內容DIV組合
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.