Vue设置footer保持在底部

Geho

已于 2022-04-10 16:24:44 修改

阅读量5.9k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js css3 经验分享

于 2022-04-10 16:23:38 首次发布

本文链接：https://blog.youkuaiyun.com/HHCS231/article/details/124080434

2 篇文章

订阅专栏

本文详细介绍了如何使用Vue和flex布局来使footer始终保持在网页底部，通过设置`.m-content-display`为flex列布局，并调整`.m-router-view`的flex属性，配合position属性调整`#app`元素，确保footer在内容不足时自动填充。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在footer中一般放置网站的信息，例如备案号等。

我们封装一个footer组件，放在下面，这时会发现footer是紧跟着组件的，我们要的效果是让footer居于网站底部，当高度不足时，就无法撑到底部。

要让自适应高度填充满页面把footer挤到底部，那我们可以使用flex布局，将的flex设置为1,footer的设置为0
理论上让占用100%的宽度，把footer挤到底部

<div class="m-content-display">
    <div class="m-router-view">
    <router-view />
    </div>
    <footer-div></footer-div>
</div>

.m-content-display {
display: flex;
        flex-direction: column;
        min-height: 100%;
}
.m-router-view {
  flex: 1;
}

这样做后发现还是不能填充到底部，我们在最外层id=“app”的div中加入

#app {
	/*其他*/
	position: absolute;
 	top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

发现footer就可以完美的被撑到底部
在这里插入图片描述

Vue设置footer保持在底部​