☰

絶対配置のdivを親divの高さまで拡張する 質問する

tag-icon • tag-icon html css position master-pages parent-child
絶対配置のdivを親divの高さまで拡張する 質問する

以下の CSS でわかるように、child2を の前に配置しますchild1。これは、現在開発中のサイトがモバイル デバイスでも機能する必要があるためです。モバイル デバイスでは がchild2下部に表示される必要があります。これは、モバイル デバイスでコンテンツの下に表示したいナビゲーションが含まれているためです。 - マスター ページを 2 つにしないのはなぜですか。これは、HTML 全体で再配置される唯一の 2 つであるdivsため、この小さな変更に 2 つのマスター ページはやりすぎです。

HTML:

<div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

CS: ...

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

child2サブサイトによってナビゲーション項目の数が異なる可能性があるため、高さは動的になります。

絶対位置の要素はフローから削除され、他の要素によって無視されることはわかっています。親 div で
設定してみましたoverflow:hidden;が、効果はなく、 でも同様ですclearfix。

私の最後の手段は、JavaScript を使用して 2 つを適切に再配置することですdivsが、今のところは、JavaScript 以外の方法でこれを行う方法があるかどうか試してみます。

ベストアンサー1

あなた自身がその質問に答えました:

絶対位置に配置された要素はフローから削除され、他の要素によって無視されることはわかっています。

したがって、絶対位置に配置された要素に応じて親の高さを設定することはできません。

固定の高さを使用するか、JavaScript を使用する必要があります。

最近ではCSSを使うこともあるフレックスボックスまたはグリッドを使用せずに親コンテナ内のHTML要素の視覚的な順序を逆にするには、レイアウトを使用しますposition: absolute;。CSS グリッドレイアウトの列の順序を逆にする

おすすめ記事