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 。
