幅：位置と100％：絶対（CSS）その場合は

Question

：

<div style="width:auto;background:red;color:white">test</div> 

あなたは、画面全体の幅（100％）を埋めるように引き伸ばされるのdivを取得します。

これは私が起こる必要があるものです。

しかし、私はまた、開始位置を設定する必要があります。私は位置：絶対が必要です。

position：absoluteを追加すると、divの幅は..内のコンテンツの幅と同じになります（浮動小数点数に似ています）。これを回避する方法はありますか？

私は単純に幅を指定することはできません。これは、など、国境のサイズをアカウントに取ることはありませんので、あなたが幅を使用することができます。..

おかげで、 ウェズリー

Answer 1

私がposition：absoluteを追加すると、divの幅は 内の内容と同じくらい広いです（浮動小数点と同様）。 の周りには何らかの方法がありますか？

私は単純に幅を指定することはできません：これは アカウント境界のサイズになりませんので、あなたがposition:absolute; left:0; right:0; top:0を使用することができ

...など、100％。このよう

：http://jsfiddle.net/thirtydot/yQWGV/

Answer 2

を100％：100％とCSSの属性ボックスをIE 5.5のように動作するボックスモデル、つまりパディングと枠線を幅に数えられるようにすることです。それは比較的新しいCSS3の属性だと唯一の新しいブラウザで動作するように、しかしhttp://jsfiddle.net/dJtm2/

は警戒してください、とあなたは私の例から見ることができるように恐ろしい逆効果測定を必要とします。ここでは

div.absolute { 
    width: 100%; 
    border: 5px solid #000; 
    background-color: #F00; 
    position: absolute; top: 100px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    padding: 50px; 
} 

はフィドルですこれはベンダープレフィックスです。

Answer 3

は、単純に次のように書く：このpadding & borderで

div.absolute { 
    border: 5px solid #000; 
    background-color: #F00; 
    position: absolute; 
    top: 100px; 
    padding: 50px; 
    left:0; 
    right:0; 
} 

http://jsfiddle.net/dJtm2/1/

要素の幅を増加させません。