CSS Calc替代

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试使用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-OLD */
width: expression(100% - 500px);

回答：

几乎总是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>

我不会在IE 5.5（hahahaha）中工作，但它将在IE8+，所有移动设备和所有现代浏览器（caniuse）中工作

我刚刚从Paul Irish的博客中找到了这篇文章，他还展示了框大小作为简单calc（）表达式的一种可能选择：（粗体是我的）

边框可以很好地解决边界框问题，这是我最喜欢的用例之一。我可能想用50％或20％的列划分网格，但想通过px或em添加填充。

。

以上技术确实与相应的calc（）语句看起来相同。虽然有区别。使用calc（）规则时，内容div的宽度值实际为100% - width of

fixed div，但是使用上述技术，内容div的实际宽度为全100％宽度，但 外观 为“填满”剩余宽度。（这可能足以满足大多数人的需求）

也就是说，如果内容div的宽度实际上 是很重要的 ，100% - fixed div width 那么可以使用另一种技术-

利用块格式化上下文

1）浮动固定宽度div

2）在内容div上设置overflow:hidden或overflow:auto

以上是 CSS Calc替代 的全部内容， 来源链接： utcz.com/qa/420583.html

回到顶部