Car*_*llo 1 components footer twitter-bootstrap bootstrap-4 angular
¿我如何使页脚停留在具有以下结构的网站底部？
<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取决于一个变量，该变量是通过按导航栏上的按钮设置的标题。情况是，并非所有这些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。
您可以按照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;
}
| 归档时间： |
|
| 查看次数： |
10101 次 |
| 最近记录： |