CSS3 calc()函数实现自适应布局（设置动态值）

最新推荐文章于 2023-03-17 14:09:39 发布

今天也是爱大大的一天吖

最新推荐文章于 2023-03-17 14:09:39 发布

阅读量586

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/qq_45560350/article/details/116945507

版权

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;
  }