twitter-bootstrap 使用 Angular 4 和 Bootstrap 4 在底部设置页脚（适应内容）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47274184/
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
Set footer on bottom (adapted to content) with Angular 4 and Bootstrap 4
提问by Carlos Pisarello
?How can i make a footer stay on bottom of a website with the following structure?:
?如何使页脚停留在具有以下结构的网站底部？：
<html>
<head>
</head>
<body>
<app-root></app-root>
</body>
</html>
So, the app-root is the main component in angular, inside this component i have the following structure:
所以，app-root 是 angular 的主要组件，在这个组件中我有以下结构：
<app-navbar></app-navbar>
<div class="container">
<div class="row">
<div class="col-12 p-0">
<app-information *ngIf="title == 'information'"></app-information>
<app-form *ngIf="title == 'form'"></app-form>
<app-proyects *ngIf="title == 'proyects'"></app-proyects>
<app-blog *ngIf="title == 'blog'"></app-blog>
<app-courses *ngIf="title == 'coursess'"></cursos>
</div>
</div>
</div>
<app-footer></app-footer>
So, just for understanding, the divs inside the col-12 div are shown depending on a variable called title setted up by pressing buttons on the navbar. The case is that not all of those divs have content that exceedes the screen size, and the footer goes upwards.
因此，为了便于理解，col-12 div 中的 div 的显示取决于通过按下导航栏上的按钮设置的名为 title 的变量。情况是，并非所有这些 div 都有超过屏幕尺寸的内容，并且页脚向上。
Inside my footer i have this structure:
在我的页脚里面，我有这个结构：
<footer class="bg-inf-blue" >
<div class="container p-0">
<div class="row text-white py-3">
<div class="col-6 h6 p-0">Contact</div>
<div class="col-6 h6">Social Media</div>
<div class="col-2 p-0">
<ul class="list-unstyled">
<li class="h6">Place 1</li>
<li>Place 1 address</li>
<li>XXX XXX-XXXX</li>
</ul>
</div>
<div class="col-2">
<ul class="list-unstyled">
<li class="h6">Place 2</li>
<li>Place 2 address</li>
<li>XXX XXX-XXXX</li>
</ul>
</div>
<div class="col-2">
<ul class="list-unstyled">
<li class="h6">Place 3</li>
<li>Place 3 address</li>
<li>XXX XXX-XXXX</li>
</ul>
</div>
<div class="col-6 align-items-center">
<a href="https://www.facebook.com/address/" target="blank"><img src="../assets/facebook-logo-button.png" height="40px"></a>
<a href="https://twitter.com/address" target="blank"><img src="../assets/twitter-logo-button.png" height="40px"></a>
</div>
<div class="col-12 p-0">
<small>Lorem ipsum dolor sit amet consectetur</small>
</div>
</div>
</div>
</footer>
what i need is that the footer to stay on the bottom of the screen when the content between the and is too short to fill the screen.
我需要的是，当 和 之间的内容太短而无法填满屏幕时，页脚要留在屏幕底部。
If there's a solution with CSS, i'm working with Twitter Bootstrap 4, if there's a solution with typescript, i'm working with Angular 4.
如果有 CSS 解决方案，我正在使用 Twitter Bootstrap 4，如果有打字稿解决方案，我正在使用 Angular 4。
回答by pixelbits
You can apply a sticky footeras described on the Twitter v4 example (https://v4-alpha.getbootstrap.com/examples/sticky-footer/).
您可以按照 Twitter v4 示例 ( https://v4-alpha.getbootstrap.com/examples/sticky-footer/) 中所述应用粘性页脚。
Here is a short example:
这是一个简短的例子：
HTML
HTML
<footer class="footer">
...
</footer>
CSS
CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px;
}
回答by Dmitry Grinko
There are a lot of ways to set footer on bottom. This is one of them:
有很多方法可以在底部设置页脚。这是其中之一：
<div class="wrapper container">
... // your html code here
<div class="push"></div>
</div>
<app-footer></app-footer>
<style>
.wrapper{
min-height: 100%;
margin-bottom: -170px;
}
* html .wrapper{
height: 100%;
}
.push{
height: 170px;
}
</style>
170px is a height of the footer in my case.
在我的例子中，170px 是页脚的高度。
回答by Brian Wright
If I'm understanding correctly, this can usually be achieved with css, traditionally:
如果我理解正确，这通常可以通过 css 来实现，传统上：
html,body{
height: 100%
}
For your example, you could try:
对于您的示例，您可以尝试：
.container { height: 100%;}
Or even try moving your app-navbar and app-footer into index.html instead of app.component.html
或者甚至尝试将您的 app-navbar 和 app-footer 移动到 index.html 而不是 app.component.html
回答by Vaniom
Same problem, solved with this method:
同样的问题，用这个方法解决了：
html {
position: relative;
min-height: 100%;
}
body {
/* 115px is the height of my footer */
padding-bottom: 115px;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
padding-top: 20px;
padding-bottom: 10px;
}
