Posisi: absolut dan tinggi orang tua?

Saya memiliki beberapa wadah dan anak-anak mereka hanya diposisikan secara absolut / relatif. Bagaimana cara mengatur tinggi wadah agar anak mereka bisa berada di dalamnya?

Berikut kodenya:

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

Ini jsfiddle. Saya ingin teks "batang" muncul di antara 4 kotak, bukan di belakangnya.

http://jsfiddle.net/Ht9Qy/

Ada perbaikan mudah?

Perhatikan bahwa saya tidak tahu tinggi anak-anak ini, dan saya tidak dapat menyetel tinggi: xxx untuk kontainer.

Jika saya memahami apa yang Anda coba lakukan dengan benar, maka menurut saya hal ini tidak mungkin dilakukan dengan CSS sambil menjaga anak-anak tetap pada posisinya.

Unsur-unsur yang diposisikan secara mutlak sepenuhnya dihapus dari alur dokumen, dan dengan demikian dimensinya tidak dapat mengubah dimensi induknya.

Jika Anda benar - benar harus mencapai pengaruh ini sambil menjaga anak-anak sebagaiposition: absolute , Anda dapat melakukannya dengan JavaScript dengan mencari ketinggian turunan yang diposisikan secara mutlak setelah mereka dirender, dan menggunakannya untuk menyetel tinggi induk.

Alternatifnya, cukup gunakan float: left/ float:rightdan margin untuk mendapatkan efek pemosisian yang sama sambil menjaga anak-anak dalam alur dokumen, Anda kemudian dapat menggunakan overflow: hiddenpada induk (atau teknik clearfix lainnya) untuk menyebabkan tingginya meluas ke anak-anaknya.

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

Berikut solusi saya,
Dalam contoh Anda, Anda dapat menambahkan elemen ketiga dengan "gaya yang sama" dari elemen .one & .two, tetapi tanpa posisi absolut dan dengan visibilitas tersembunyi:

HTML

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

CSS

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

Ini adalah jawaban yang terlambat, tetapi dengan melihat kode sumber, saya perhatikan bahwa ketika video dalam layar penuh, kelas "mejs-container-fullscreen" ditambahkan ke elemen "mejs-container". Dengan demikian dimungkinkan untuk mengubah gaya berdasarkan kelas ini.

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

Selain itu, jika Anda ingin membuat video MediaElement Anda lancar menggunakan CSS, di bawah ini adalah trik hebat dari Chris Coyier: http://css-tricks.com/rundown-of-handling-flexible-media/

Cukup tambahkan ini ke CSS Anda:

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

Saya harap ini membantu.

Masalah tata letak semacam ini sekarang dapat diatasi dengan flexbox, menghindari kebutuhan untuk mengetahui ketinggian atau tata letak kontrol dengan pemosisian absolut, atau float. Pertanyaan utama OP adalah bagaimana membuat orang tua mengandung anak dengan ketinggian yang tidak diketahui, dan mereka ingin melakukannya dalam tata letak tertentu. Menyetel tinggi wadah induk ke "fit-content" melakukan ini; menggunakan "display: flex" dan "justify-content: space-between" menghasilkan tata letak bagian / kolom yang saya pikir OP coba buat.

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

Saya memodifikasi biola OP: http://jsfiddle.net/taL4s9fj/

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

Anda dapat melakukannya dengan kisi:

article {
    display: grid;
}

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

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

Ini adalah jawaban lain yang terlambat tetapi saya menemukan cara yang cukup sederhana untuk menempatkan teks "batang" di antara empat kotak. Berikut adalah perubahan yang saya buat; Di bagian bar saya membungkus teks "bar" di dalam sebuah pusat dan tag div.

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

Dan di bagian CSS saya membuat kelas "bar" yang digunakan dalam tag div di atas. Setelah menambahkan ini, teks batang dipusatkan di antara empat blok berwarna.

.bar{
    position: relative;
}