249

以下の CSS でわかるように、自分child2自身を の前に配置したいと考えていchild1ます。これは、現在開発中のサイトがchild2、モバイル デバイスのコンテンツの下に必要なナビゲーションが含まれているため、モバイル デバイスでも動作する必要があるためです。- なぜ 2 つのマスターページではないのですか? これは、HTML 全体で再配置される唯一の 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サブサイトごとにナビゲーション アイテムの数が増減する可能性があるため、動的な高さがあります。

絶対配置要素がフローから削除されるため、他の要素によって無視されることを知っています。
親 div を設定しようとしoverflow:hidden;ましたが、それは役に立ちませんでしたclearfix。

私の最後の手段は、JavaScript を使用して 2 つの位置を適切に変更することですdivsが、今のところ、これを行う JavaScript 以外の方法が存在するかどうかを確認してみます。

4

15 に答える 15

176

You answered the question by yourself: "I know that absolute positioned elements are removed from the flow, thus ignored by other elements." So you can't set the parents height according to an absolutely positioned element.

You either use fixed heights or you need to involve JS.

于 2012-08-22T10:20:02.607 に答える
13

これを解決するための非常に簡単な方法があります。

親 div で display:none を使用して、相対 div で child1 と child2 のコンテンツを複製するだけです。child1_1 と child2_2 とします。child2_2 を上に、child1_1 を下に配置します。

あなたのjquery（または何でも）が絶対divを呼び出すときは、対応する相対div（child1_1またはchild2_2）をdisplay:block AND visibility:hiddenで設定するだけです。相対的な子はまだ見えませんが、親の div を高くします。

于 2015-11-18T19:09:06.507 に答える
11

Feeelaは正しいですが、次のように配置divを逆にすると、子要素に縮小または拡大する親を取得できdiv

.parent {
    position: absolute;
    /* position it in the browser using the `left`, `top` and `margin` 
       attributes */
}

.child {
    position: relative;
    height: 100%;
    width: 100%;

    overflow: hidden;
    /* to pad or move it around using `left` and `top` inside the parent */
}

これはうまくいくはずです。

于 2013-04-25T12:55:07.973 に答える
-4

これを試してください、それは私のために働いた

.child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

子の高さを親の高さに設定します

于 2016-10-18T04:31:59.600 に答える