web-dev-qa-db-ja.com

CSS Calcの代替

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

csscss3css-calc
67
jipje44

ほとんどの場合、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を設定します

デモ

116
Danield

カルクがトリックを実行する前にフォールバックを行ってください。

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

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

35
Tommy Sørensen

これを使用

    .content
{
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 500px;
    margin-right: -500px;
}
17
Mohamed Malik

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で問題が発生しました...

0
bhiqa

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です。

0
sam

#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>
0
Mareks Dunkurs