CSS Calc 替代方案

我正在尝试动态改变一个 div 的宽度使用 CSS，没有 jquery。以下浏览器中的 下面的代码可以工作: 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);

我也可以支持 Opera 和 Android 浏览器吗？

76633 次浏览
小开

在计算机发挥作用之前，先做好准备。

width: 98%;               /* fallback for browsers without support for calc() */
width: calc(100% - 1em);

点此查看更多 https://developer.mozilla.org/en-US/docs/Web/CSS/calc

小开
最佳答案

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

附言: 我不会在 IE5.5中工作(哈哈哈哈) ，但它可以在 IE8 + 、所有移动设备和所有现代浏览器(犬科动物)中工作

宽度演示

高度演示

我刚刚在 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

演示

小开

用这个

    .content
{
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 500px;
margin-right: -500px;
}
小开

刚刚花了3个小时的最好的部分，试图解决这个在 andriod 设备上的特定情况，无法得到方块大小工作，所以我已经把它链接到我的 JS 作为一个肮脏的解决方案... 没有 jQuery 需要！:)

采用 andriod 2.3的工作代码。

<div class="sessionDiv" style="width:auto;">
<img> <!-- image to resize -->
</div>
<div class="sessionDiv" style="width:auto;">
<img> <!-- image to resize -->
</div>

带有事件侦听器的 JS

var orient =
{
orientation:window.orientation,
width: window.innerWidth,
check: function()
{
// if orientation does not match stored value, update
if(window.orientation !== this.orientation)
{
this.orientation = window.orientation; //set new orientation
this.width = window.innerWidth; //set new width
this.adjustIrritatingCSS(this.width); //change ui to current value
}
//if width does not match stored value, update
if(window.innerWidth !== this.width)
{
this.width = window.innerWidth; //set new width
this.adjustIrritatingCSS(this.width); //change ui to current value
}
},
adjustIrritatingCSS: function(screenWidth)
{
//disgusting workaround function
var titleBoxes = document.getElementsByClassName('sessionDiv');
var i = titleBoxes.length;
var sessWidth = screenWidth - 300; // calc(100% - 300px); -> equivalent
while(i--)
{
titleBoxes[i].style.width = String( sessWidth + "px");
//resize image in auto sized div
}
sessWidth = null; //clear width
titleBoxes = null; //clear nodelist
i = null; // clear index int
}
};


window.onload = function()
{
window.addEventListener('resize', function(){orient.check();});
//on resize, check our values for updates and if theres changes run functions
window.addEventListener('orientationchange', function(){orient.check();});
//on rotate, check our values for updates and if theres changes run functions
setInterval(function(){orient.check();}, 2000);
//occasionally check our values for updates and if theres changes run functions(just incase!!)
orient.adjustIrritatingCSS(orient.width);
//sets value on first run
};

希望这可以帮助任何人谁不能得到的方块大小的工作！ PS 我已经经历了问题与 ios 使用这个..。

小开

Change #menuLog width with % or px and you will see magic. Works with every device even < 2.3

*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#menuLog{
width:30%;
/*width:300px;*/
height: 60px;
padding: 5px;
background-color: #ddd;
}
#menuLog > div[inline-log="1"]{
display: inline-block;
vertical-align: top;
width: 100%;
height: 100%;
margin-right: -60px;
}
#menuLog > div[inline-log="1"] > div[inline-log="1.1"]{
margin-right: 60px;
height: 100%;
background-color: red;
}
#menuLog > div[inline-log="2"]{
display: inline-block;
vertical-align: top;
width: 60px;
height: 100%;
}
#menuLog > div[inline-log="2"] > div[inline-log="2.1"]{
display: inline-block;
vertical-align: top;
width: 55px;
height: 100%;
background-color: yellow;
margin-left:5px;
}
<div id="menuLog">
<div inline-log="1">
<div inline-log="1.1">
One
</div>
</div><div inline-log="2">
<div inline-log="2.1">
Two
</div>
</div>
</div>

小开

我想添加无 calc、无边框框架(即 CSS2)的替代方案。

正常流程块元素最初具有 width: auto，它实际上是包含块的宽度减去边距、边框和填充宽度。

以上例子可以这样做，没有边框，简单如下

.content {
padding-left: 300px;
}

同样的

.content {
margin-left: 1px;
border-left: 1em solid;
padding-left: 1rem;
}

有效宽度为 100% - 1px - 1em - 1rem。

对于绝对定位的元素，height: auto具有类似的属性:

.content {
position: absolute;
top: 0;
bottom: 0;
margin-bottom: 1px;
border-bottom: 1em solid;
padding-bottom: 1rem;
}

这里的有效高度是 100% - 1px - 1em - 1rem。


提交答案