底部固定的链接模块:
1、页面高度不足时,在底部;
2、页面高度高度超过100%,展示在最底部;
实现方法:父组件
<div>
<div class="header">
<app-header></app-header>
</div>
<div style="overflow: visible; width: 100%;">
<router-outlet></router-outlet>
</div>
<div class="footer">
<app-footer></app-footer>
</div>
</div>
.footer{
min-height: 10vh
}
子组件
<footer>
<ng-container>
<div class="footer">
<div class="wg-link">
<a [href]="url1" target="_blank">{{ 'FOOTER.LINK_1'}}</a>
<a [href]="url2" target="_blank">{{ 'FOOTER.LINK_2'}}</a>
<a [href]="url3" target="_blank">{{ 'FOOTER.LINK_3'}}</a>
<a [href]="url4" target="_blank">{{ 'FOOTER.LINK_4}}</a>
</div>
</div>
</ng-container>
</footer>
.footer{
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 20px;
padding-bottom: 24px;
position: absolute;
left: 0;
bottom: 0;
min-width: 100%
}