前端开发案例:【flex】完美页脚

摘要: 前端开发案例:【flex】完美页脚

用flex布局来实现的话，就是把“三列布局”给放倒。

三列布局是水平方向排列，因此需要指明容器宽度。

放倒以后需要指明高度，这样在中间内容不够的情况下，自动拉伸中间部分，能保持页脚始终在页面下方。

但是由于文档高度可以是超过视口高度的，因此需要指明min-height，而不是height。

#header

#main

#footer

<style>

div:nth-child(1),

div:nth-child(3){

background:gray;

height:100px;

}

div:nth-child(2){

background:silver;

flex:1;

}

body{

display:flex;

flex-direction:column;

min-height:100vh;

}

</style>

【Web前端开发交流群036】群号568663768