使用 Angular 4 和 Bootstrap 4 在底部设置页脚（适应内容）
Posted
技术标签:
【中文标题】使用 Angular 4 和 Bootstrap 4 在底部设置页脚（适应内容）【英文标题】：Set footer on bottom (adapted to content) with Angular 4 and Bootstrap 4 【发布时间】：2018-04-26 17:12:26 【问题描述】：¿如何使页脚停留在具有以下结构的网站底部？：
<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" ></a>
<a href="https://twitter.com/address" target="blank"><img src="../assets/twitter-logo-button.png" ></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。
【问题讨论】：
【参考方案1】：您可以按照 Twitter v4 示例 (https://v4-alpha.getbootstrap.com/examples/sticky-footer/) 中的说明应用 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;
【讨论】：
position: absolute 不是最佳解决方案，因为您应该关心具有 position:relative 的父 html 元素。我的意思是有机会得到一些错误。 好点，我为 HTML 添加了 css 样式，并添加了指向 sticky-footer.css 的链接以供参考。【参考方案2】：有很多方法可以在底部设置页脚。 这是其中之一：
<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 是页脚的高度。
【讨论】：
【参考方案3】：如果我理解正确，这通常可以通过 css 来实现，传统上：
html,body
height: 100%
对于您的示例，您可以尝试：
.container height: 100%;
或者甚至尝试将您的 app-navbar 和 app-footer 移动到 index.html 而不是 app.component.html
【讨论】：
【参考方案4】：同样的问题，用这个方法解决了：
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;
【讨论】：
以上是关于使用 Angular 4 和 Bootstrap 4 在底部设置页脚（适应内容）的主要内容，如果未能解决你的问题，请参考以下文章
在angular 2和bootstrap 4中使用自定义颜色实现进度条
Bootstrap 4 导航栏不会在 Angular 4 中折叠
使用 Angular 4 和 Bootstrap 4 在底部设置页脚（适应内容）
导航栏下拉菜单不适用于 Angular 和 Bootstrap 4