/* 通过calc()函数让内容区块自动伸缩 */
.my-body{min-height: calc(71.7vh - 80px);
}
footer{height:50px;
}
参考：https://www.jianshu.com/p/6efe2c76a2dd
当我们要设置网页中的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置底
作者：鱼娟note
链接：https://www.jianshu.com/p/6efe2c76a2dd
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
