位置：絶対と親の高さ？

私はいくつかのコンテナを持っており、その子は絶対的/相対的に配置されています。コンテナの高さを設定して、子供が中に入るようにする方法は？

これがコードです：

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

これがjsfiddleです。「バー」テキストを4つの四角形の間に配置し、後ろに配置しないでください。

http://jsfiddle.net/Ht9Qy/

簡単な修正はありますか？

これらの子の高さがわからないことに注意してください。コンテナの高さを設定することはできません：xxx。

私があなたが正しくやろうとしていることを理解しているなら、CSSで子供たちを絶対的な位置に保ちながらこれを行うことはできないと思います。

絶対配置された要素はドキュメントフローから完全に削除されるため、それらの寸法は親の寸法を変更できません。

あなたがいる場合、本当にとして子供たちを維持しながら、これが影響を与える達成しなければならなかったposition: absolute、あなたは彼らがレンダリングされた後に絶対位置の子の高さを見つけ、そして親の高さを設定することを使用してJavaScriptでそれを行うことができます。

または、float: left/ float:rightとマージンを使用して、ドキュメントフローで子を保持しながら同じ配置効果を得ることができます。次にoverflow: hidden、親（またはその他のclearfixテクニック）を使用して、その高さを子の高さに拡張できます。

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

これが私の回避策です
。あなたの例では、.one＆.two要素の「同じスタイル」で3番目の要素を追加できますが、絶対位置はなく、非表示になっています。

HTML

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

CSS

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

これは遅い答えですが、ソースコードを見ると、ビデオがフルスクリーンの場合、「mejs-container-fullscreen」クラスが「mejs-container」要素に追加されていることがわかりました。したがって、このクラスに基づいてスタイルを変更することができます。

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

あなたは以下のCSSを使用してのMediaElementビデオ流体を行いたい場合にも、クリスCoyierによって素晴らしいトリックです：http://css-tricks.com/rundown-of-handling-flexible-media/

これを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;
}

お役に立てば幸いです。

この種類のレイアウトの問題は、フレックスボックスで解決できるため、高さを知ったり、絶対配置でレイアウトを制御したり、フロートを制御したりする必要がありません。OPの主な質問は、親に身長が不明な子供を含める方法であり、特定のレイアウト内でそれを実行することを望んでいました。親コンテナの高さを「fit-content」に設定すると、これが行われます。「display：flex」と「justify-content：space-between」を使用すると、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;
}

OPのフィドルを変更しました：http : //jsfiddle.net/taL4s9fj/

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

これは別の遅い答えですが、4つの正方形の間に「バー」テキストを配置するかなり単純な方法を見つけました。これが私が行った変更です。バーセクションでは、「bar」テキストを中央のタグとdivタグで囲みました。

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

そして、CSSセクションで、上のdivタグで使用される「bar」クラスを作成しました。これを追加した後、バーテキストは4つの色付きブロックの中央に配置されました。

.bar{
    position: relative;
}