☰

CSS Calcの代替品 質問する

tag-icon • tag-icon css css-calc
CSS Calcの代替品 質問する

私は、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 ブラウザもサポートできますか?

ベストアンサー1

ほとんどの場合、レイアウトに使用されるbox-sizing: border-box計算ルールを置き換えることができます。calc(100% - 500px)

例えば：

次のようなマークアップがあるとします。

<div class="sideBar">sideBar</div>
<div class="content">content</div>

これを行う代わりに: (サイドバーの幅が300ピクセルであると仮定)

.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>

追伸:IE 5.5では動作しませんが（笑）、IE8以降、すべてのモバイル、すべての最新ブラウザでは動作します（使ってもいいですか）

幅デモ

高さデモ

見つけたこの郵便受けPaul Irish のブログでは、単純な calc() 式の代替としてボックス サイズ設定も紹介されています (太字は私によるものです)。

border-box がうまく解決する私のお気に入りのユースケースの 1 つは列です。グリッドを 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

デモ

おすすめ記事