Vị trí: tuyệt đối và chiều cao mẹ?

Tôi có một số container và con của chúng chỉ có vị trí tuyệt đối / tương đối. Làm thế nào để đặt chiều cao thùng chứa để con cái của họ sẽ ở trong chúng?

Đây là mã:

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

Đây là một jsfiddle. Tôi muốn văn bản "thanh" xuất hiện giữa 4 ô vuông, không phải phía sau chúng.

http://jsfiddle.net/Ht9Qy/

Bất kỳ sửa chữa dễ dàng?

Lưu ý rằng tôi không biết chiều cao của những đứa trẻ này và tôi không thể đặt chiều cao: xxx cho vùng chứa.

Nếu tôi hiểu những gì bạn đang cố gắng thực hiện một cách chính xác, thì tôi không nghĩ rằng điều này có thể thực hiện được với CSS trong khi vẫn giữ các phần tử con ở vị trí tuyệt đối.

Các phần tử được định vị tuyệt đối hoàn toàn bị loại bỏ khỏi luồng tài liệu và do đó kích thước của chúng không thể thay đổi kích thước của cha mẹ chúng.

Nếu bạn thực sự phải đạt được điều này ảnh hưởng trong khi giữ nguyên con cái position: absolute, bạn có thể làm như vậy với JavaScript bằng cách tìm chiều cao của những đứa trẻ được định vị hoàn toàn sau khi chúng được hiển thị và sử dụng nó để đặt chiều cao của cha mẹ.

Ngoài ra, chỉ cần sử dụng float: left/ float:rightvà lề để có được cùng một hiệu ứng định vị trong khi vẫn giữ các phần con trong luồng tài liệu, sau đó bạn có thể sử dụng overflow: hiddentrên phần tử gốc (hoặc bất kỳ kỹ thuật clearfix nào khác) để làm cho chiều cao của nó mở rộng bằng phần con của nó.

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

Đây là cách giải quyết của tôi,
Trong ví dụ của bạn, bạn có thể thêm phần tử thứ ba có "cùng kiểu" các phần tử .one & .two, nhưng không có vị trí tuyệt đối và có khả năng hiển thị ẩn:

HTML

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

CSS

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

Đây là một câu trả lời muộn, nhưng bằng cách xem mã nguồn, tôi nhận thấy rằng khi video ở chế độ toàn màn hình, lớp "mejs-container-fullscreen" được thêm vào phần tử "mejs-container". Do đó, có thể thay đổi kiểu dáng dựa trên lớp này.

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

Ngoài ra, nếu bạn muốn làm cho video MediaElement của mình trôi chảy bằng cách sử dụng CSS, dưới đây là một thủ thuật tuyệt vời của Chris Coyier: http://css-tricks.com/rundown-of-handling-flexible-media/

Chỉ cần thêm cái này vào CSS của bạn:

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

Tôi hy vọng nó sẽ giúp.

Loại vấn đề bố cục này có thể được giải quyết với flexbox ngay bây giờ, tránh việc phải biết độ cao hoặc bố trí điều khiển với định vị tuyệt đối hoặc nổi. Câu hỏi chính của OP là làm thế nào để cha mẹ chứa những đứa trẻ có chiều cao không xác định, và họ muốn làm điều đó trong một bố cục nhất định. Đặt chiều cao của vùng chứa chính thành "fit-content" sẽ thực hiện được điều này; sử dụng "display: flex" và "justify-content: space-between" tạo ra bố cục phần / cột mà tôi nghĩ OP đang cố gắng tạo.

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

Tôi đã sửa đổi fiddle của OP: http://jsfiddle.net/taL4s9fj/

css-thủ thuật trên flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Đây là một câu trả lời muộn khác nhưng tôi đã tìm ra một cách khá đơn giản để đặt văn bản "thanh" ở giữa bốn ô vuông. Đây là những thay đổi tôi đã thực hiện; Trong phần thanh, tôi đã bọc văn bản "thanh" trong một trung tâm và các thẻ div.

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

Và trong phần CSS, tôi đã tạo một lớp "bar" được sử dụng trong thẻ div ở trên. Sau khi thêm điều này, văn bản thanh được căn giữa giữa bốn khối màu.

.bar{
    position: relative;
}