web-dev-qa-db-ja.com

width：calc（100％-10px）と同等のCSS3

私はCSSを移行するための代替手段を探しています-すでにFFとChrome-に取り組んでいます-QtWebKitはCSS3機能をうまくレンダリングしていないためです。

私は次のものを持っています：

_.fit {
    width: -moz-calc(100% - 10px);
    width: -webkit-calc(100% - 10px);
    width: -o-calc(100% - 10px);
    width: calc(100% - 10px);
}
_

ワイヤーフレームの例に示されているように、クラスがすべての要素に適合するようにしたい。

enter image description here

注：ほとんどすべてのCSS3機能は完全にレンダリングできますが、前に述べたように*-calc()には問題があり、他の解決策を見つけることができません。 。 _margin-right_、_padding-right_などを使用します。

@ EDIT：私はフィドルを作成しました http://jsfiddle.net/dj3hh/ 期待される動作を示すために-できますフィドルのサイズを変更すると、すべての余白は右から_10px_を尊重します。 calc()を使わずにこれを行う新しい方法が欲しい

csswebkitqtwebkit
11
Ragen Dazs

ボックスモデルのレンダリングをbox-sizing: borderboxに変更すると、パディングは幅全体に追加されるのではなく、幅全体に含まれます。この例では、クラスをラッピング要素に追加していると想定しています。

.fit { 
    width:100%
    padding-right:10px
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box; 

}

ブラウザのサポートはとても良いです。最新のすべてのブラウザ。 IE7以下のポリフィルが必要になるのはあなただけです。

詳細な背景情報：paulirish.com/2012/box-sizing-border-box-ftw/

編集：

これは、あなたの概要を完全に満たしていると私が信じている解決策です。フィドルを参照してください： http://jsfiddle.net/David_Knowles/UUPF2/

.fit { 
    width:100%
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box; 
}

td {
    padding-right: 10px;
}
15
Timidfriendly

プットposition: relative親要素で、次に実行します...

.fit {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 10px;
}
1
methodofaction