CSS3calc（）函数实现⾃适应布局（设置动态值）
calc()函数能根据不同的单位的数值来计算元素属性，实现⾃适应布局
例如，我在页⾯上定义三个div，分别是页⾯的上中下三个部分
<div class="header">
header
</div>
<div class="container">
container
</div>
<div class="footer">
footer
</div>
给上下部分设置⾼度都是1rem，现在我想要实现中间部分⾃适应页⾯的⾼度，使得三个部分的⾼度正好撑满页⾯⾼度
在没有接触到这个函数之前，我应该会先随便给个值，再更改值的⼤⼩⼀遍⼀遍地去测试，直到到差不多合适的值为⽌但有了这个函数，就不需要这么⿇烦啦，直接写
.header {
width:100%;
height:1rem;
line-height:1rem;
background: pink;
}
.container {
width:100%;
height:calc(100vh -2rem);//calc()函数可以根据不同单位的数值来计算元素属性实现⾃适应布局
line-height:calc(100vh -2rem);
background: skyblue;
}
.footer{
width:100%;
height:1rem;
line-height:1rem;
background: tomato;
}
css布局左边固定右边自适应页⾯效果如下
改变窗⼝⼤⼩ 也不会有问题 ⽜批

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。