[英]How to make Bootstrap sticky footer content go full page height?
我正在使用Boostrap示例使用CSS為網站創建一個粘性頁腳,這一切都很好,頁面調整大小后,頁腳底部保留在頁面底部。 在許多頁面上,我有內容需要顯示幾乎整頁,禁止頁腳。 因此,頁面的內容部分需要設置為100%高度,因此其內容又可以調整為全高。
我們怎樣才能讓綠色容器達到全高,所以它觸及頂部的頁面頂部和底部的頁腳頂部?
謝謝!
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">This is the sticky footer template taken from the Bootstrap web site.</p>
<p class="lead">How can we make this green .container div the full height of its parent #wrap div?</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container"></div>
</div>
#wrap .container {
background-color: lightgreen;
}
/* Sticky footer styles */
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push, #footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
我有你的問題的解決方案。 我把它從JSFiddle移到了codepen,因為我更喜歡codepen。 沒有其他原因。 http://cdpn.io/IJHxf
這基本上是我得到答案的地方,他們解釋得比以往任何時候都好。 http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/
當你實現那個答案時,我找到了height: auto !important;
是它為什么不立即起作用的罪魁禍首。 在你的#wrap id中注釋它,看它是否完全生效。 代碼筆還有其他更改,可以真正了解正在發生的事情。 你真正需要做的原始問題是什么
#wrap .container {
background-color: lightgreen;
min-height: 100%;
height: auto; /* this line takes care of "more than enough content problem" */
}
html, body {
height: 100%;
background-color: #dedede;
padding: 0;
margin: 0;
}
#wrap {
min-height: 100%;
/* height: auto !important; */
height: 100%;
margin: 0 auto -60px;
}
實際上,你能做什么,並且更有意義的是,而不是評論整個行height: auto !important;
你可以脫掉!imporant
。 例如
#wrap {
height: auto !important;
/* changed to */
height: auto;
}
我改變了一些顏色,使事情變得更加明顯。 你會在codepen中看到它。 在代碼筆中有更多的注釋,看看我真的做了什么。
此外,我發現你的粘性頁腳因為邊距而給我的頁面滾動條。 對我來說,我用下面的代碼擺脫了滾動條。
margin: 0 auto -60px;
/* changed to */
margin: 0 auto -80px;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.