Pozycja: wysokość bezwzględna i wysokość nadrzędna?

Mam kilka pojemników, a ich dzieci są tylko bezwzględne / względnie ustawione. Jak ustawić wysokość pojemników, aby ich dzieci były w nich?

Oto kod:

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;
}

Oto jsfiddle. Chcę, aby tekst „słupka” był wyświetlany między 4 polami, a nie za nimi.

http://jsfiddle.net/Ht9Qy/

Jakieś łatwe poprawki?

Zauważ, że nie znam wzrostu tych dzieci i nie mogę ustawić wysokości: xxx dla kontenerów.

Jeśli rozumiem, co próbujesz zrobić poprawnie, to nie sądzę, aby było to możliwe w przypadku CSS, jednocześnie utrzymując dzieci w absolutnej pozycji.

Elementy pozycjonowane absolutnie są całkowicie usuwane z obiegu dokumentów, a tym samym ich wymiary nie mogą zmieniać wymiarów ich rodziców.

Jeśli naprawdę musiałbyś osiągnąć ten efekt, zachowując dzieci w niezmienionym stanie position: absolute, możesz to zrobić za pomocą JavaScript, znajdując wysokość absolutnie pozycjonowanych elementów potomnych po ich renderowaniu i używając tego do ustawienia wysokości rodzica.

Alternatywnie, po prostu użyj float: left/ float:righti marginesów, aby uzyskać ten sam efekt pozycjonowania, zachowując elementy podrzędne w przepływie dokumentu, a następnie możesz użyć overflow: hiddenna rodzicu (lub dowolnej innej techniki clearfix), aby zwiększyć jego wysokość do wysokości jego dzieci.

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;
}

Oto moje obejście.
W swoim przykładzie możesz dodać trzeci element z „tymi samymi stylami” elementów .one i .two, ale bez pozycji bezwzględnej i z widocznością ukrytą:

HTML

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

CSS

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

To późna odpowiedź, ale patrząc na kod źródłowy, zauważyłem, że gdy wideo jest w trybie pełnoekranowym, klasa „mejs-container-fullscreen” jest dodawana do elementu „mejs-container”. Dzięki temu możliwa jest zmiana stylizacji w oparciu o tę klasę.

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

Ponadto, jeśli chcesz, aby Twoje wideo MediaElement było płynne za pomocą CSS, poniżej znajduje się świetna sztuczka autorstwa Chrisa Coyiera: http://css-tricks.com/rundown-of-handling-f flexible-media/

Po prostu dodaj to do swojego CSS:

.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;
}

Mam nadzieję, że to pomoże.

Ten rodzaj problemu z układem można teraz rozwiązać za pomocą flexbox, unikając potrzeby znajomości wysokości lub układu sterowania z pozycjonowaniem bezwzględnym lub pływakami. Głównym pytaniem OP było to, jak sprawić, by rodzic zawierał dzieci o nieznanym wzroście i chcieli to zrobić w określonym układzie. Służy do tego ustawienie wysokości kontenera nadrzędnego na „fit-content”; użycie „display: flex” i „justify-content: space-between” tworzy układ sekcji / kolumn, który, jak sądzę, próbował utworzyć OP.

<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;
}

Zmodyfikowałem skrzypce OP: http://jsfiddle.net/taL4s9fj/

css-tricks na flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Możesz to zrobić za pomocą siatki:

article {
    display: grid;
}

.one {
    grid-area: 1 / 1 / 2 / 2;
}

.two {
    grid-area: 1 / 1 / 2 / 2;
}

To kolejna późna odpowiedź, ale wymyśliłem dość prosty sposób na umieszczenie tekstu „słupka” między czterema kwadratami. Oto zmiany, które wprowadziłem; W sekcji paska umieściłem tekst „bar” w środku i znacznikach DIV.

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

W sekcji CSS utworzyłem klasę „bar”, która jest używana w znaczniku DIV powyżej. Po dodaniu tego tekst paska został wyśrodkowany między czterema kolorowymi blokami.

.bar{
    position: relative;
}