我正在嘗試使用CSS和沒有jquery動(dòng)態(tài)地更改div的寬度。以下代碼將在以下瀏覽器中運(yùn)行：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及更高版本，我發(fā)現(xiàn)了以下內(nèi)容：表達(dá)式。這是正確的用法嗎？/* IE-OLD */width: expression(100% - 500px);我還可以支持Opera和Android瀏覽器嗎？
3 回答
躍然一笑
TA貢獻(xiàn)1826條經(jīng)驗(yàn) 獲得超6個(gè)贊
幾乎總是box-sizing: border-box可以替換計(jì)算規(guī)則，例如calc(100% - 500px)用于布局。
例如：
如果我有以下標(biāo)記：
<div class="sideBar">sideBar</div>
<div class="content">content</div>
而不是這樣做：（假設(shè)邊欄為300px寬）
.content {
width: calc(100% - 300px);
}
做這個(gè)：
.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：我不會(huì)在IE 5.5（hahahaha）中工作，但它將在IE8 +，所有移動(dòng)設(shè)備和所有現(xiàn)代瀏覽器（caniuse）中工作
我剛剛從Paul Irish的博客中找到了這篇文章，他還展示了框大小作為簡(jiǎn)單calc（）表達(dá)式的一種可能選擇：（粗體是我的）
邊框可以很好地解決邊界框問題，這是我最喜歡的用例之一。我可能想用50％或20％的列劃分網(wǎng)格，但想通過px或em添加填充。沒有CSS即將發(fā)布的calc（），這是不可能的……除非您使用border-box。
注意：以上技術(shù)確實(shí)與相應(yīng)的calc（）語句看起來相同。雖然有區(qū)別。使用calc（）規(guī)則時(shí)，內(nèi)容div的寬度值實(shí)際為100% - width of fixed div，但是使用上述技術(shù)，內(nèi)容div的實(shí)際寬度為全100％寬度，但外觀為“填滿”剩余寬度。（這可能足以滿足大多數(shù)人的需求）
也就是說，如果內(nèi)容div的寬度實(shí)際上是很重要的，100% - fixed div width 那么可以使用另一種技術(shù)-利用塊格式化上下文-（請(qǐng)參見此處和此處的詳細(xì)信息）：
1）浮動(dòng)固定寬度div
2）在內(nèi)容div上設(shè)置overflow:hidden或overflow:auto
慕容森
TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超18個(gè)贊
用％或px更改#menuLog寬度，您將看到魔術(shù)。甚至適用于<2.3的所有設(shè)備
*{
-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>
添加回答
舉報(bào)
0/150
提交
取消