CSS Calc替代

我想dynamic地改变一个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和更高 ,我发现以下:expression式。 这是正确的用法:

 /* 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); 

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

用这个

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

只花了3小时的最佳部分试图解决这个forriod设备上的具体情况,couldnt得到框大小工作,所以我已经链接到我的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的问题…

用%或px改变#menuLog的宽度,你会看到魔法。 每个设备均可使用,甚至<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> 

我想添加无计算,无边框(即CSS2)的替代scheme。

正常stream程块元素最初的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