JqueryではなくCSSを使用して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ブラウザもサポートできますか?
ほとんどの場合、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()式の代替としてボックスサイズを示しています:(太字は私のものです)
Border-boxがうまく解決する私のお気に入りのユースケースの1つは列です。 50%または20%の列でグリッドを分割したいが、pxまたはemでパディングを追加したい場合があります。 CSSの今後のcalc()なしでは、border-boxを使用しない限りこれは不可能です。
NB:上記の手法は実際に、対応するcalc()ステートメントと同じように見えます。ただし、違いがあります。 calc()ルールを使用する場合、コンテンツdivの幅の値は実際には100% - width of fixed div
になりますが、上記の手法では、コンテンツdivの実際の幅は完全な100%幅ですが、残りの幅を「埋める」外観。 (ほとんどの人がここで必要とするのにおそらく十分です)
つまり、コンテンツdivの幅が実際に100% - fixed div width
であることがが重要な場合、ブロックフォーマッティングコンテキストを利用する別の手法を使用できます(-を参照) here および here の詳細はこちら):
1)固定幅divをフロートする
2)コンテンツdivでoverflow:hidden
またはoverflow:auto
を設定します
カルクがトリックを実行する前にフォールバックを行ってください。
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;
}
Andriodデバイスの特定のケースでこれを回避するために3時間の最良の部分を費やしただけで、ボックスのサイズ設定が機能しないため、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で問題が発生しました...
No-calc、no-border-box(つまり、CSS2)の代替を追加したかったのです。
通常フローブロック要素には、最初にwidth: auto
があります。これは、実質的に包含ブロックの幅からマージン、ボーダー、およびパディングの幅を引いたものです。
上記の例 は、border-boxなしで、単に次のように実行できます。
.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
です。
#menuLogの幅を%またはpxで変更すると、魔法が表示されます。 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>