calc 宽度(高度)自适应!

<div class="body_t">
    <div class="left">
        左边
    </div>

    <div class="right">
        右边
    </div>
</div>
<div class="body_b"></div>
html,body{
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  height: 100%;
}
.body_t{
  height: 100px;
  &>div{
    line-height: 100px;
    float: left;
    height: 100%;
  }
  .left{
    width: 200px;
    background: #895800;
  }
  .right{
    width: calc(100% - 200px);
    background: #019885;
  }
}
.body_b{
  height: calc(100% - 100px);
  background: #710098;
}

 

posted @ 2022-02-10 15:43  星米尔工作室  阅读(94)  评论(0)    收藏  举报