Vue设置footer保持在底部​

在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就可以完美的被撑到底部
​