相対的な親DIVが絶対的な子の幅を継承するDIV

Question

親DIVの一番下に子DIVを配置しようとしていますが、親DIVのディメンションを指示するのに役立つ子DIVの内容も必要です。私は今のところそれを持っているので、子DIVは親DIVの幅/高さに影響しません。ここで

は私のHTML/CSSコードのサンプルです：

// HTMLコード：

<div id="parent"> 
    <h3>Top Aligned Title</h3> 
    <div id="child"></div> 
</div> 

// CSSコード：私はそれを行う必要がある何

#parent { 
    background-color:#222; 
    position: relative; 
    height: 500px; 
} 
#child { 
    background-color:#444; 
    position: absolute; 
    bottom: 0px; 
    width: 100px; 
    height: 200px; 
} 

私がやろうとしていることを達成するか？私は、絶対的/相対的なCSSルールを忘れて、親のDIV内にテーブルを作成するだけで、下位の位置合わせと親の次元を決定する内容の両方を達成することができます。

しかし、CSSでこれを行う方法があり、親DIVの幅を設定する必要がないかどうかを知りたいと思います。

ありがとうございます！

Answer 1

あなたが基本的に聞いていることは、純粋なCSS/HTMLではできないということです。 （少なくともテーブルを使わないで）あなたは子供の幅/高さを読み込み、それからやりたい計算をして（わからない）Javascriptが必要になり、新しい高さ/幅を#parentに設定します。

子供の高さ/幅をコンテンツに応じて変更したい場合はもちろん、これはネイティブCSSです。高さ/幅をautoに設定し、次にその中にテキストを追加し始めますあなたのコンテンツを内部に収めるように成長し始めるでしょう。

#childが絶対配置されているため、ドキュメントの通常の流れから取り除かれます。したがって、#parentには影響しません。

Answer 2

最新のCSSではこれが可能です。

HTML：

<div id="parent"> 
    <h3>Top Aligned Title</h3> 
    <div id="child"> 
     <p>CHILD ELEMENT</p> 
    </div> 
</div> 

CSS：

#parent { 
    background:red; 
    height: 500px; 
    position:relative; 
} 
#child { 
    background:green; 
    position: absolute; 
    top:100%; 
    -webkit-transform: translateY(-100%); 
    -ms-transform: translateY(-100%); 
    transform: translateY(-100%); 
    width: 100px; 
} 

http://jsfiddle.net/Bushwazi/bpe5s6x3/

1. transform:translateY(-100%);がトリックです。数学はelementのbox-modelに基づいています。
2. top:50%;とtransform:translateY(-50%);を組み合わせて中央に配置することもできます。
3. leftの場合はtopを、translateXの場合はtranslateYをスワップして要素を水平に配置できます。

Answer 3

ここでは、

HTML行く：CSS

<main id="parent"> 
    <div class="popup">Top Aligned Title 
    <div class="content"> 
     Content 
    </div> 
    </div> 
</main> 

を：あなたはあなたワット

#parent { 
    width: 120px; 
} 

.popup { 
    position: relative; 
    margin-top: 48px; 
} 

.content { 
    left: 0; 
    position: absolute; 
    background: green; 
    width: 100%; 
} 

http://jsfiddle.net/8L9votay/