我正在尝试使用CSS而不是jquery来动态地改变div的宽度。以下代码将在以下浏览器中运行:http://caniuse.com/calc
/* 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);
我还能支持和安卓浏览器吗?
发布于 2013-09-02 18:03:39
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>
PS:我不能在IE5.5中工作(哈哈哈),但它可以在IE8+,所有移动设备和所有现代浏览器(caniuse)中工作
我刚刚在保罗·爱尔兰的博客中发现了this post,他还展示了框大小作为简单calc()表达式的可能替代方案:(我的是粗体)
我最喜欢的边界框解决得很好的用例之一是列。我可能想用50%或20%的列划分我的网格,但想通过px或em添加填充。没有CSS即将到来的calc()这是不可能的…除非您使用边框。
calc NB:上面的技术看起来确实和相应的()语句是一样的。不过,这是有区别的。当使用calc()规则时,内容div的宽度的值实际上是100% - width of fixed div
,但是使用上面的技术,内容div的实际宽度是完整的100%宽度,但它看起来像是“填充”了剩余的宽度。(这可能足以满足大多数人在这里的需求)
也就是说,如果content div的宽度实际上是100% - fixed div width
是很重要的,那么可以使用一种不同的技术--利用块格式化上下文--(参见here和here了解更多细节):
1)浮动固定宽度的div
2)在content div上设置overflow:hidden
或overflow:auto
发布于 2013-09-02 17:54:27
在计算完成之前,先回退一步。
width: 98%; /* fallback for browsers without support for calc() */
width: calc(100% - 1em);
请在此处查看更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/calc
发布于 2013-11-12 14:49:02
使用此
.content
{
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 500px;
margin-right: -500px;
}
https://stackoverflow.com/questions/16034397
复制相似问题