CSS Calc另类

时间:2013-04-16 10:15:27

标签: css css3 css-calc

我试图使用CSS动态更改div的宽度而不是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浏览器吗?

6 个答案:

答案 0 :(得分:115)

几乎总是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:我不会在IE 5.5(hahahaha)中工作,但它适用于IE8 +,所有移动设备和所有现代浏览器(caniuse

<强> Width Demo

<强> Height Demo

我刚刚从Paul Irish的博客中找到了this post,他还展示了box-sizing作为简单calc()表达式的可能替代方案:(粗体是我的)

  

我最喜欢的边框框解决方案之一就是列。一世   可能想要将我的网格划分为50%或20%的列,但是想要   通过px或em添加填充。 没有CSS即将推出的calc()就是这样   不可能......除非你使用边框

NB:上述技术确实与对应的calc()语句看起来相同。但是有一点不同。当使用calc()规则时,内容div的宽度值实际上将是100% - width of fixed div,但是使用上述技术,内容div的实际宽度是完整的100%宽度,但它具有'填充'剩余宽度的外观。 (这可能足以满足大多数人的需求)

那就是说,如果很重要内容div的宽度实际上是100% - fixed div width,那么可以使用另一种技术 - 利用块格式化上下文 - (参见{{3和血腥细节的here

1)浮动固定宽度div

2)在内容div上设置overflow:hiddenoverflow:auto

here

答案 1 :(得分:35)

只需在计算结果出现之前进行回退。

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

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

答案 2 :(得分:17)

使用此

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

答案 3 :(得分:0)

只花了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遇到了问题......

答案 4 :(得分:0)

使用%或px更改#menuLog宽度,您将看到魔法。适用于所有设备甚至&lt; 2.3

&#13;
&#13;
*{
	-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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 5 :(得分:0)

我想添加no-calc,no-border-box(即CSS2)替代方案。

正常流块元素最初具有C:\Users\RickyDam\AppData\Local\Android\android-sdk,实际上是包含块的宽度减去边距,边框和填充宽度。

example above可以在没有边框的情况下完成,只需

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; }