html - 位置: 絶対と親の高さ?

Question

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

コードは次のとおりです。

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 を設定することはできません。

Answer 1

あなたが正しくやろうとしていることを理解していれば、子を絶対に配置したまま 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;
}

Answer 2

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

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

また、CSS を使用して MediaElement ビデオを流動的にしたい場合は、以下に Chris 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;
}

お役に立てば幸いです。

Answer 3

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

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

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

.bar{
    position: relative;
}