使用背景
目前有以下情况,一个页面Layout
,包含定高的Header
和Footer
,以及靠内容自适应撑开的Content
部分。要求Footer处于页面底部,且不使用position: fix;
固定于底部。
初始方案
在React中,通过state值去动态设置页面视口高度。
this.setState({
height: document.documentElement.clientHeight
});
<div style={{ height: this.state.height }}>
{ content }
</div>
但是这样会造成一个后果,当页面由小屏幕切换至大屏幕时,setState虽然会带来render的重新渲染,但该行为并不会随着屏幕的大小而重新渲染,因此,该过程中会产生底部的白色区域。
第二种方案
考虑到上述方案会产生一个白色到底部条,不利于页面美观,虽然再次刷新会使得该问题解决,但总归是不方便的,不利于用户体验的。于是,采用了媒体查询来改善以上问题。通过查询页面的高度,来设置不同的样式以满足需求。
@media screen and (max-height: 780px) {
body {
background-color:lightblue;
}
}
@media screen and (min-height: 800px) {
body {
background-color: red;
}
}
某方面来说,这样确实是能解决以上问题。但是,媒体查询的结果随着查询尺寸变化。查询尺寸设置的密集,即考虑到更多数屏幕适配情况,页面产生的遗留问题将会更少。正因为如此,当查询尺寸设置较少,问题则会持续暴露,这时候也是不利于用户体验的。
最终方案
由于前两种解决方案不断的暴露问题,因此这里使用CSS3
的计算属性calc()
来进行计算。calc()
函数可以用来对数值属性执行四则运算。
.content {
min-height: calc(100vh - 128px);
}
这里同时要注意兼容性问题。
.content {
-moz-calc(expression); /*Firefox*/
-webkit-calc(expression); /*chrome safari*/
calc(); /*Standard */
}
注意事项
- 使用“+”、“-”、“*” 和 “/”四则运算;
- 可以使用百分比、px、em、rem等单位;
- 可以混合使用各种单位进行计算;
- 表达式中有“+”和“-”时,其前后必须要有空格,如”widht: calc(12%+5em)”这种没有空格的写法是错误的;
- 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
写代码过程中才过的坑,我踩过,希望你别踩~ 祝君安好。