当我们要设置网页中的footer置底（sticky footer），我们可以这样办
body元素内的结构代码如下
<body>
<div class="main">
<ul>
<li>啦啦啦啦</li>
<li>啦啦啦啦</li>
<li>啦啦啦啦</li>
</ul>
</div>
<footer>
<ul>
<li>联系电话</li>
<li>请拨打111</li>
</ul>
</footer>
</body>
方式一:
<style>
footer{
position:absolute;
bottom:0;
}
</style>
但是当我们的内容区块过多超过一屏时,就会出现footer不会随着内容往后移(不再置底)的问题
接下来的两种方式就能解决当内容过多时,footer永远都置底
方式二：使用calc()设置内容高度
<style>
*{
margin:0;
padding:0;
}
/* 通过calc()函数让内容区块自动伸缩 */
.main{
min-height: calc(100vh - 80px);
}
footer{
height:50px;
}
</style>
上面的80px=30px+50px，是因为假设内容区块和footer的间距为30px，footer的高度是50px. 只需min-height: calc(100vh - 80px)一句话，我们就可以计算出内容区块的自动伸缩高度，从而让footer置底
注意,calc()使用加减法时要当心，记得在
+,-号的前后加一个空格。这样做的原因是在未来我们在calc()函数内部可能会用到关键字,为了到时候能区别开-是关键字的连字符还是运算符减号
方式三：使用Flexbox弹性盒子布局
<style>
*{
margin:0;
padding:0;
}
footer ul{
list-style-type: none;
}
/*Flexbox弹性盒子，灵活解决*/
body{
display:flex;
flex-flow:column;
min-height:100vh;//100%;
}
.main{
flex:1;
}
</style>
其中，把flex设置为一个大于0的值，比如flex:1，实现了内容区块自动伸展并占满所有的可用空间
注意，响应式网页设计时，
-
vh,vw跟着显示窗口（视图）的宽度或高度，而不是父元素的宽度或高度 -
vw:viewport width，1vw相当于显示窗口宽度的1%
vh:viewport height，1vh相当于显示窗口高度的1% - 兼容性：IE9+，chrome/firefox/safari/opera支持，[iOS]safari 8+支持，[Androidbrowser4.4+支持，chrome for android39支持
利用Flexbox弹性盒子布局，仅用四行代码，就实现了footer置底
每天都努力一点点
谢谢你看完
网友评论