CSS Calc备选方案

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (52)

我试图使用CSS而不是jQuery动态地更改div的宽度。下面的代码将起作用

/* Firefox */
width: -moz-calc(100% - 500px);
/* WebKit */
width: -webkit-calc(100% - 500px);
/* Opera */
width: -o-calc(100% - 500px);
/* Standard */
width: calc(100% - 500px);

我也想支持IE 5.5及更高版本。,我发现了以下内容。这是正确的用法吗?

/* IE-OLD */
width: expression(100% - 500px);

我还能支持Opera和Android浏览器吗?

提问于
用户回答回答于

几乎总是box-sizing: border-box可以替代诸如calc(100% - 500px)用于布局的计算规则。

例如:

如果我有以下标记:

<div class="sideBar">sideBar</div>
<div class="content">content</div>

而不是这样做:(假设侧边栏宽度为300px)

.content {
  width: calc(100% - 300px);
}

做这个:

.sideBar {
     position: absolute; 
     top:0;
     left:0;
     width: 300px;
}
.content {
    padding-left: 300px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}
html,
body,
div {
  height: 100%;
}
.sideBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  background: orange;
}
.content {
  padding-left: 300px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: wheat;
}

<div class="sideBar">sideBar</div>
<div class="content">content</div>
用户回答回答于
width: 98%;               /* fallback for browsers without support for calc() */
width: calc(100% - 1em);

所属标签

可能回答问题的人

  • 找虫虫

    0 粉丝0 提问5 回答
  • 骑牛看晨曦

    4 粉丝522 提问4 回答
  • 爸爸

    腾讯 · 客户端安全 (已认证)

    3 粉丝4 提问4 回答
  • 不吃貓的鱼oo

    5 粉丝466 提问4 回答

扫码关注云+社区

领取腾讯云代金券