web-dev-qa-db-ja.com

子divをその親の幅に合わせるクロスブラウザーメソッド

子divを親のwidthに収めるソリューションを探しています。

私がここで見たほとんどのソリューションクロスブラウザ互換ではありません（例：IE display: table-cell;では<=8はサポートされていません）。

image showing intended result with a child div being the full size of it's parent, with inner padding

htmlcsscross-browserparent-child
57
mate64

解決策は、単にwidth: 100%を宣言しないことです。

デフォルトはwidth: autoです。これは、ブロックレベルの要素（divなど）の場合、とにかく（width: 100%の実行方法とは異なる）利用可能な「フルスペース」を使用します。

参照：http://jsfiddle.net/U7PhY/2/

念のため、私の答えからまだ明らかではありません。子widthにdivを設定しないでください。

代わりに box-sizing: border-boxに興味がある とすることもできます。

64
thirtydot

box-sizing cssプロパティを使用できます。これはクロスブラウザ（ie8 +、およびすべての実際のブラウザ）であり、そのような場合には非常に優れたソリューションです。

#childDiv{
   box-sizing: border-box;
   width: 100%; //or any percentage width you want
   padding: 50px;
}

フィドル

17
Y.Puzyrenko

position:relative;を外側の要素に配置すると、内側の要素はこの要素に従って配置されます。次に、内側の要素のwidth:auto;は、外側の幅と同じになります。

1
Steeven

画像では、子の外側にパディングを配置しています。これはそうではありません。パディングは要素の幅に追加されるため、パディングを追加して幅を100％にすると、幅は100％+パディングになります。必要なものにするには、親divにパディングを追加するか、内部divにマージンを追加する必要があります。 divはブロックレベルの要素であるため、自動的に親の幅に拡張されます。

1
Alex

子divにwidth: 100%も必要ありません：

http://jsfiddle.net/DanielDZC/w2mev/1/

1
Daniel Gruszczyk

そのパディングスペースを使用したい場合は...

http://jsfiddle.net/qD4zd/

すべての色は背景色です。

1
Joonas