71

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

4

6 に答える 6

119

ほとんどの場合、レイアウトに使用される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 では動作しません (ハハハハ) が、IE8+、すべてのモバイル、およびすべての最新のブラウザー ( caniuse ) では動作します。

幅のデモ

高さのデモ

ポール アイリッシュのブログからこの投稿を見つけました。単純な calc() 式の可能な代替手段として、ボックス サイジングも紹介しています (太字は私のものです)。

ボーダーボックスがうまく解決する私のお気に入りの使用例の 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

デモ

于 2013-09-02T10:03:38.990 に答える
36

計算がトリックを行う前に、フォールバックを用意してください。

width: 98%;               /* fallback for browsers without support for calc() */
width: calc(100% - 1em);

詳細はこちらhttps://developer.mozilla.org/en-US/docs/Web/CSS/calc

于 2013-09-02T09:54:26.613 に答える
17

これを使って

    .content
{
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 500px;
    margin-right: -500px;
}
于 2013-11-12T06:49:01.887 に答える