1. ホーム
  2. ハイパーリンク

[解決済み】絶対位置のdivが親divの高さを拡張するようにした。

2022-04-01 23:22:55

質問

下のCSSを見るとわかるように、私は child2 の前に位置するようにします。 child1 . これは、私が現在開発しているサイトがモバイル端末でも動作するようにするためで、その場合、モバイル端末では child2 というのも、モバイル端末ではコンテンツの下に表示させたいナビゲーションが含まれているからです。- なぜマスターページが2つないのですか?これは、唯一の2つの divs このマイナーチェンジに2つのマスターページを使うのはやりすぎです。

HTMLです。

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

CSSです。

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

child2 の高さは動的で、サブサイトによってナビゲーションの項目が増えたり減ったりするからです。

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

を設定してみました。 overflow:hidden; を親Divに追加しましたが、これは役に立ちませんでした。 clearfix .

最後の手段としては、JavaScriptで2つの divs しかし、今のところ、これを行うための非JavaScriptの方法があるかどうか試してみることにします。

解決方法は?

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

固定高さを使うか、JSを介在させる必要があります。