Position: absolute und Elterngröße?

Ich habe einige Container und ihre Kinder sind nur absolut / relativ positioniert. Wie stelle ich die Höhe der Container so ein, dass ihre Kinder in ihnen sind?

Hier ist der Code:

HTML

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="one"></div>
        <div class="two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->

<section id="bar">
    <header>bar</header>
    <article>
        <div class="one"></div><div></div>
        <div class="two"></div>
    </article>
</section>  

CSS

article {
    position: relative;
}

.one {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: absolute;
    top: 10px;
    right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

Hier ist eine jsfiddle. Ich möchte, dass "Balken" -Text zwischen 4 Quadraten und nicht dahinter angezeigt wird.

http://jsfiddle.net/Ht9Qy/

Irgendwelche einfachen Lösungen?

Beachten Sie, dass ich die Größe dieser Kinder nicht kenne und die Höhe nicht festlegen kann: xxx für Container.

Wenn ich verstehe, was Sie richtig machen wollen, denke ich nicht, dass dies mit CSS möglich ist, während die Kinder absolut positioniert bleiben.

Absolut positionierte Elemente werden vollständig aus dem Dokumentenfluss entfernt, und daher können ihre Abmessungen die Abmessungen ihrer Eltern nicht ändern.

Wenn Sie diesen Effekt wirklich erzielen mussten, während Sie die untergeordneten Elemente beibehalten position: absolute, können Sie dies mit JavaScript tun, indem Sie die Höhe der absolut positionierten untergeordneten Elemente nach dem Rendern ermitteln und damit die Höhe des übergeordneten Elements festlegen.

Alternativ können Sie einfach float: left/ float:rightund Ränder verwenden, um den gleichen Positionierungseffekt zu erzielen, während die overflow: hiddenuntergeordneten Elemente im Dokumentfluss bleiben. Anschließend können Sie das übergeordnete Element (oder eine andere Clearfix-Technik) verwenden, um die Höhe auf die untergeordneten Elemente zu erhöhen.

article {
    position: relative;
    overflow: hidden;
}

.one {
    position: relative;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

Hier ist meine Problemumgehung:
In Ihrem Beispiel können Sie ein drittes Element mit "gleichen Stilen" von .one & .two-Elementen hinzufügen, jedoch ohne die absolute Position und mit versteckter Sichtbarkeit:

HTML

<article>
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
</article>

CSS

.three{
    height: 30px;
    z-index: -1;
    visibility: hidden;
}

Dies ist eine späte Antwort, aber beim Betrachten des Quellcodes habe ich festgestellt, dass beim Vollbild des Videos die Klasse "mejs-container-fullscreen" zum Element "mejs-container" hinzugefügt wird. Es ist somit möglich, das Styling basierend auf dieser Klasse zu ändern.

.mejs-container.mejs-container-fullscreen {
    // This rule applies only to the container when in fullscreen
    padding-top: 57%;
}

Wenn Sie Ihr MediaElement-Video mithilfe von CSS flüssig machen möchten, finden Sie unten einen großartigen Trick von Chris Coyier: http://css-tricks.com/rundown-of-handling-flexible-media/

Fügen Sie dies einfach Ihrem CSS hinzu:

.mejs-container {
    width: 100% !important;
    height: auto !important;
    padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
    width: 100% !important;
    height: 100% !important;
}
.mejs-mediaelement video {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
}

Ich hoffe, es hilft.

Diese Art von Layoutproblemen kann jetzt mit der Flexbox gelöst werden, ohne dass Höhen bekannt sein oder das Layout mit absoluter Positionierung oder Schwimmern gesteuert werden müssen. Die Hauptfrage von OP war, wie ein Elternteil Kinder unbekannter Größe aufnehmen kann, und sie wollten dies innerhalb eines bestimmten Layouts tun. Wenn Sie die Höhe des übergeordneten Containers auf "fit-content" setzen, wird dies ausgeführt. Die Verwendung von "display: flex" und "rechtfertigen Inhalt: Leerzeichen zwischen" erzeugt das Abschnitts- / Spaltenlayout, von dem ich glaube, dass das OP versucht hat, es zu erstellen.

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="main one"></div>
        <div class="main two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>

<section id="bar">
    <header>bar</header>
    <article>
        <div class="main one"></div><div></div>
        <div class="main two"></div>
    </article>
</section> 

* { text-align: center; }
article {
    height: fit-content ;
    display: flex;
    justify-content: space-between;
    background: whitesmoke;
}
article div { 
    background: yellow;     
    margin:20px;
    width: 30px;
    height: 30px;
    }

.one {
    background: red;
}

.two {
    background: blue;
}

Ich habe die Geige des OP geändert: http://jsfiddle.net/taL4s9fj/

CSS-Tricks auf Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Dies ist eine weitere späte Antwort, aber ich habe eine ziemlich einfache Möglichkeit gefunden, den "Balken" -Text zwischen den vier Quadraten zu platzieren. Hier sind die Änderungen, die ich vorgenommen habe; Im Balkenbereich habe ich den "Balken" -Text in ein Center- und ein Div-Tag eingeschlossen.

<header><center><div class="bar">bar</div></center></header>

Und im CSS-Bereich habe ich eine "Bar" -Klasse erstellt, die im obigen div-Tag verwendet wird. Nach dem Hinzufügen wurde der Balkentext zwischen den vier farbigen Blöcken zentriert.

.bar{
    position: relative;
}