Relatives Eltern-DIV, um die Breite des absoluten Kind-DIV zu erben

Question

Ich versuche, ein Kind-DIV an der Unterseite eines Eltern-DIV zu positionieren, aber ich möchte auch, dass der Inhalt des Kind-DIV die Dimensionen des Eltern-DIV vorgibt . Wie ich es jetzt gerade habe, beeinflusst das Kind-DIV nicht die Breite/Höhe des Eltern-DIV. Hier

ist ein Beispiel für meine HTML/CSS-Code:

// HTML-Code:

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

// CSS-Code:

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

Was brauche ich, um es zu tun erreichen, was ich versuche zu tun? Ich könnte auf die absoluten/relativen CSS-Regeln verzichten und einfach eine Tabelle im übergeordneten DIV erstellen, mit der ich sowohl die untere Ausrichtung als auch den Inhalt erreichen kann, der die Dimensionen des übergeordneten Elements vorgibt.

Allerdings würde ich gerne wissen, ob es eine Möglichkeit gibt, dies in CSS zu tun und ohne die Breite des übergeordneten DIV festlegen zu müssen.

danke im voraus!

Answer 1

Die kurze Antwort ist, dass das, was Sie fragen, grundsätzlich nicht mit reinem CSS/HTML gemacht werden kann. (mindestens ohne Tabellen) Sie würden Javascript benötigen, das # Breite/Höhe des Kindes lesen würde und dann die Berechnung tun würde, die Sie tun möchten (ich weiß nicht) und eine neue Höhe/Breite zu #parent einstellen.

Wenn Sie meinen, dass die Höhe/Breite von # Kind entsprechend seinem Inhalt geändert werden soll, ist natürlich natives CSS, legen Sie einfach die Höhe/Breite auf auto fest und fügen Sie Text hinzu es wird anfangen zu wachsen, um deinen Inhalt darin zu passen.

Da das #Child absolut positioniert ist, wird es aus dem normalen Dokumentfluss genommen und hat daher keine Auswirkungen auf das #Parent.

Answer 2

Mit modernen CSS ist dies machbar.

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%); ist der Trick. Es ist Mathe basiert auf der elementbox-model.
2. Sie könnten auch top:50%; mit transform:translateY(-50%); kombinieren, um es zu zentrieren.
3. Sie können top für left und translateY für translateX tauschen, um das Element horizontal zu positionieren.

Answer 3

Hier gehen Sie

HTML:

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

CSS:

#parent { 
    width: 120px; 
} 

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

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

http://jsfiddle.net/8L9votay/