Bootstrap div延伸到頁面底部
[英]Bootstrap div stretch to bottom of page
問題描述
我有默認的bootstrap模板設置，我的問題是div和頁腳之間有空格。 白色空間是由於沒有足夠的內容來填充整個頁面而引起的，因此正文顯示在頁腳和內容div之間。 有沒有辦法將引導div拉伸到頁面底部，同時還使頁腳保持在最底部？ 可能有柔性盒？
這是我正在使用的代碼:(嘗試將“包裝器”div拉伸到頁腳）
HTML
<body ng-app="firstApp">
<div ng-view="" class="everything">
<div class="wrapper">
<div class="mid">
<div class="row">
<div class="col-sm-12">
<p>This is in a div that should fill the screen</p>
</div>
</div>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="container">
<p>Hello I'm the footer</p>
</div>
</footer>
</div> <!--closes the "everything" class -->
CSS
html {
height: 100%;
}
body {
height: 100% !important;
font-family: 'Roboto', sans-serif;
color: black;
background: green;
}
.footer {
text-align: center;
padding: 30px 0;
height: 4em;
background-color: #7ccbc8;
width: 100%;
}
我已經閱讀了很多關於這個主題的stackoverflow帖子，但我仍然對這方面的最佳實踐感到困惑。
2 個解決方案
解決方案1
14 已采納 2015-05-28 01:05:15
解決方案2
1 2017-08-01 11:46:27
對我有用的是設置兩者， height: 100%; 和min-height: 100vh; 在填充元素中。
.fill {
min-height: 100vh;
height: 100%;
}
並將此元素添加到父容器的類中。
將div拉伸到頁面底部
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.