web-dev-qa-db-ja.com

幅：100％、位置：絶対

もしあなたがそうするなら：

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

画面幅全体（100％）を埋めるように引き伸ばされたdivを取得します。それが私が起こらなければならないことです。

ただし、開始位置も設定する必要があります。だから、私はposition: absoluteが必要です。

Position：absoluteを追加すると、divの幅はその中のコンテンツと同じ幅になります（floatと同様）。これを回避する方法はありますか？

width: 100%は境界線のサイズなどを考慮していないため、単純に指定することはできません。

csswidthcss-position
16
Wesley

Position：absoluteを追加すると、divの幅はその中のコンテンツと同じ幅になります。（floatと同様）。これを回避する方法はありますか？

境界線のサイズなどを考慮していないため、単純にwidth：100％を指定することはできません。

position:absolute; left:0; right:0; top:0を使用できます。

このように： http://jsfiddle.net/thirtydot/yQWGV/

22
thirtydot

Width：100％とcss属性のボックスサイズを使用して、ボックスモデルをIE 5.5のように機能させることができます。つまり、パディングと境界線を幅にカウントします。

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;
}

ここにフィドルがあります： http://jsfiddle.net/dJtm2/

ただし、これは比較的新しいCSS3属性であり、新しいブラウザーでのみ機能するため、注意が必要です。私の例からわかるように、ベンダープレフィックスである恐ろしい逆効果の対策が必要です。

4
Andreas Eriksson

単に次のように書いてください：

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

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

この中でpadding & border要素の幅を広げないでください。

3
sandeep