底部footer

最新推荐文章于 2023-09-14 09:15:24 发布

herbsama

最新推荐文章于 2023-09-14 09:15:24 发布

阅读量134

点赞数

分类专栏： angular学习文章标签：前端 html

本文链接：https://blog.csdn.net/herbsama/article/details/126349961

版权

angular学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何实现一个底部固定的链接模块，该模块在页面高度不足时位于底部，超过100%则固定在最下方。通过父组件和子组件的CSS样式设置，包括使用`position:absolute`和`min-height`属性，确保了footer始终保持在合适的位置。示例代码中展示了HTML结构和相应的CSS样式，包括`.footer`的布局和定位。

摘要由CSDN通过智能技术生成

底部固定的链接模块：
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%
}