親を埋めるためにCSSの幅を作る方法は？

Question 1

この問題は以前に尋ねられたことがあると思いますが、答えが見つからないようです。

私は次のマークアップを持っています：

<div id="foo">
    <div id="bar">
        here be dragons
    </div>
</div>

私の望みは、fooの幅を600px（width: 600px;）にし、barの動作を次のようにすることです。

padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;

つまり、バーの幅をに設定する代わりに、バー592pxの外側の幅をに設定して、100%計算されるようにし592pxます。ここで重要なのは、fooの幅をに変更でき800px、これらすべてのインスタンスの計算を手動で行う代わりに、レンダリング時にbarが計算されることです。

これは純粋なCSSで可能ですか？

それでもう少し楽しい：

#barテーブルの場合はどうなりますか？
どのような場合#barTEXTAREAはありますか？
#bar入力の場合はどうなりますか？
どのような場合は、#fooテーブルセルですか（td）？（これは問題を変更しますか、それとも問題は同じですか？）

これまでのところtable#bar、input#bar議論されてきました。textarea＃barの良い解決策を見たことがありません。境界線/マージン/div折り返しのあるパディングのないテキストエリアは、の境界線divとして機能するスタイルで機能する可能性があると思いますtextarea。

Question 2

編集：

これらの3つの異なる要素はすべて、異なるレンダリングルールを持っています。

だから：

table#bar幅を100％に設定する必要があります。そうしないと、必要と判断した幅になります。ただし、テーブル行の合計幅がその幅よりも大きい場合はbar、必要な幅に拡張されます。私が思い出すならdisplay: block !important;、iveがそれを修正しなければならなかったのでしばらく経ちましたが、設定することによってこれを打ち消すことができます。（私が間違っていれば誰かが私を訂正すると確信しています）。

textarea#bari beleiveはブロックレベルの要素なので、divと同じルールに従います。ここでの唯一の注意点は、それがあるtextareaの属性取るcolsとrows文字列で測定されています。これが要素で指定されている場合、cssで指定されている幅を上書きします。

input#barはインライン要素であるため、デフォルトでは幅を割り当てることはできません。ただし、textareaのcols属性と同様に、size幅を決定できる要素に属性があります。そうは言っても、display: block;cssで使用することで、いつでも幅を指定できます。次に、divと同じレンダリングルールに従います。

td#footable-cellそれにいくつかの狂気を持っているとしてレンダリングされます。ここでの結論は、あなたの目的のために、div#fooその内容の幅を制限するのと同じように機能するということです。ここでの唯一の問題は、列のどこかに折りたたまれない可能性のあるテキストであり、幅の設定を無視することになります。また、列内のすべてのセルは、最も幅の広いセルの幅を取得します。

これがブロックレベル要素のデフォルトの動作です。widthがauto（デフォルト）の場合、それは含まれている要素の内側の幅の100％になります。つまり、本質的には：

#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}

あなたが望むものを正確に提供します。

Question 3

ほぼそこに、（outerWidthはCSSプロパティではありません）に変更outerWidth: 100%;するだけwidth: auto;です。

または、次のスタイルをバーに適用します。

width: auto;
display: block;

Question 4

スタイルを使用する

left: 0px;

または

right: 0px;

または

top: 0px;

または

bottom: 0px;

私はほとんどの場合それが仕事をするだろうと思います

Question 5

したがって、調査の結果、次のことが発見されました。

以下のためdiv#barの設定display:block; width: auto;の同等の原因となりますouterWidth:100%;

の場合は、table#bar以下に示すルールを使用してdivでラップする必要があります。したがって、構造は次のようになります。

<div id="foo">
 <div id="barWrap" style="border....">
  <table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;">

このようにして、テーブルは親divを100％#barWrap占有し、#barテーブルにborders / margin / paddingを追加するために使用されます。あなたが全部の背景を設定する必要があることに注意#barWrapして持っている#barの背景を透明にするかと同じであること#barWrap。

以下のためにtextarea#barとinput#barとあなたは同じことを行う必要がありますtable#bar下側が国境を除去することにより、あなたが入力/ TEXTAREAのネイティブウィジェットのレンダリングを停止していることで、#barWrapあなたはおそらくする必要がありますので、の国境は、他のすべてよりもビット異なるになりますすべての入力をこのようにスタイル設定します。

Question 6

box-sizing: border-box;
width: 100%;
padding: 5px;

ボックスサイズ：ボーダーボックス; パディング、マージン、ボーダーが幅の計算に含まれるようにします。

MDN