Html Bootstrap div 拉伸到页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30495058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap div stretch to bottom of page
提问by Troy Griffiths
I have the default bootstrap template setup, and my problem is that there is white space between a div and the footer. The white space is caused by not having enough content to fill up the entire page, so the body shows in between the footer and the content div. Is there a way to stretch a bootstrap div to the bottom of the page while also making the footer to stay at the very bottom? Possibly with flex box?
我有默认的引导程序模板设置，我的问题是 div 和页脚之间有空白。空白是因为没有足够的内容来填满整个页面，所以正文显示在页脚和内容 div 之间。有没有办法将引导 div 拉伸到页面底部，同时使页脚停留在最底部？可能与弹性盒？
Here is the code I'm working with: (trying to stretch the "wrapper" div to the footer)
这是我正在使用的代码：（尝试将“包装器”div 拉伸到页脚）
HTML
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
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%;
}
I've read many stackoverflow posts on this topic, butI'm still pretty confused about the best practice for this.
我已经阅读了许多关于这个主题的 stackoverflow 帖子，但我仍然对最佳实践感到困惑。
回答by AngularJR
回答by Thomas Weinmüllner
What worked for me was setting both, height: 100%;and min-height: 100vh;in the fill element.
对我有用的是同时设置height: 100%;和min-height: 100vh;填充元素。
.fill {
min-height: 100vh;
height: 100%;
}
And adding this element to the classes of the parent container.
并将此元素添加到父容器的类中。
