我正在嘗試使用CSS和沒有jquery動態地更改div的寬度。以下代碼將在以下瀏覽器中運行：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瀏覽器嗎？
3 回答
躍然一笑
TA貢獻1826條經驗 獲得超6個贊
幾乎總是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）中工作
我剛剛從Paul Irish的博客中找到了這篇文章，他還展示了框大小作為簡單calc（）表達式的一種可能選擇：（粗體是我的）
邊框可以很好地解決邊界框問題，這是我最喜歡的用例之一。我可能想用50％或20％的列劃分網格，但想通過px或em添加填充。沒有CSS即將發布的calc（），這是不可能的……除非您使用border-box。
注意：以上技術確實與相應的calc（）語句看起來相同。雖然有區別。使用calc（）規則時，內容div的寬度值實際為100% - width of fixed div，但是使用上述技術，內容div的實際寬度為全100％寬度，但外觀為“填滿”剩余寬度。（這可能足以滿足大多數人的需求）
也就是說，如果內容div的寬度實際上是很重要的，100% - fixed div width 那么可以使用另一種技術-利用塊格式化上下文-（請參見此處和此處的詳細信息）：
1）浮動固定寬度div
2）在內容div上設置overflow:hidden或overflow:auto
慕容森
TA貢獻1853條經驗 獲得超18個贊
用％或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>
- 3 回答
- 0 關注
- 977 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消