¿如何使页脚停留在具有以下结构的网站底部？:
<html>
<head>
</head>
<body>
<app-root></app-root>
</body>
</html>
所以，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>
因此，为了便于理解，col-12 div 中的 div 的显示取决于通过按下导航栏上的按钮设置的名为 title 的变量。
情况是，并非所有这些 div 的内容都超过了屏幕大小，并且页脚向上。
在我的页脚内，我有这样的结构:
<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>
我需要的是当 和 之间的内容太短而无法填满屏幕时，页脚留在屏幕底部。
如果有 CSS 解决方案，我正在使用 Twitter Bootstrap 4，如果有使用 typescript 的解决方案，我正在使用 Angular 4。
最佳答案
您可以申请 sticky footer如 Twitter v4 示例 (https://v4-alpha.getbootstrap.com/examples/sticky-footer/) 中所述。
这是一个简短的例子:
HTML
<footer class="footer">
...
</footer>
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;
}
关于twitter-bootstrap - 使用 Angular 4 和 Bootstrap 4 在底部设置页脚(适应内容)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47274184/