web-dev-qa-db-ja.com

位置：絶対および親の高さ？

私にはいくつかのコンテナがあり、その子は絶対的/相対的な位置にあります。子がその中に入るようにコンテナの高さを設定する方法は？

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

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

htmlcsspositionheightabsolute
80
Wordpressor

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

これが私の回避策です。
あなたの例では、.one＆.two要素の "same styles"で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;
}
14
BBeta

これは遅い答えですが、ソースコードを見ると、ビデオがフルスクリーンのときに「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ビデオを滑らかにしたい場合は、以下が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;
}

役に立てば幸いです。

3
user3517189

この種のレイアウトの問題はflexboxで解決できるようになり、高さを知ったり、絶対配置やフロートでレイアウトを制御したりする必要がなくなりました。 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/

フレックスボックスのcss-tricks： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

0
Colin Dodgson