calc计算样式

最新推荐文章于 2024-03-21 10:49:14 发布

Saber_husband

最新推荐文章于 2024-03-21 10:49:14 发布

阅读量355

点赞数

文章标签： html 前端 javascript css

本文链接：https://blog.csdn.net/Saber_husband/article/details/127094409

版权

样式适应屏幕时可使用calc计算样式

例如：:style="{ width: hideHeaderAside ? '100%' : 'calc(100% - 200px)' }"

使用场景：屏幕底部需要固定一个底边，右侧固定按钮确定与取消

解决方案：

<div class="btn-bottom" :style="{ width: hideHeaderAside ? '100%' : 'calc(100% - 200px)' }">
      <el-button class="btn-right-val" type="secondary" @click="implementReset">取消</el-button>
      <el-button class="btn-right" type="primary" @click="implementSubmit">确定</el-button>
</div>

.btn-right {
  float: right;
  padding: 13px 12px;
  margin-top: 12px;
}
.btn-right-val {
  float: right;
  padding: 13px 12px;
  margin-top: 12px;
  margin-right: 24px;
  margin-left: 12px;
}