web-dev-qa-db-ja.com

絶対位置divが親divの高さを拡張するようにする

下のCSSでわかるように、child2をchild1の前に配置します。これは、現在開発中のサイトでもモバイルデバイスで作業する必要があるためです。この場合、モバイルデバイスのコンテンツの下にナビゲーションが必要です。 - 2マスターページではないのはなぜですか？これはHTML全体で再配置される2つのdivだけなので、このマイナーチェンジのための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もそうしません。

私の最後の手段は、それに応じて2つのdivを再配置するためのJavaScriptですが、今のところ、これを行うにはJavaScript以外の方法があるかどうかを試してみます。

htmlcsspositionmaster-pagesparent-child
168
user557419

あなたは自分で質問に答えました：「私は絶対位置の要素はフローから取り除かれているので、他の要素によって無視されていることを知っています。」そのため、絶対位置の要素に従って親の高さを設定することはできません。

固定の高さを使用するか、JSを参加させる必要があります。

136
feeela

position: absoluteを持つ要素へのストレッチは不可能ですが、同じ効果を得ながら絶対位置を避けることができる解決策がしばしばあります。あなたの特定のケースで問題を解決するこのフィドルを見てくださいhttp://jsfiddle.net/gS9q7/

トリックは、最初の要素から右へ、2番目の要素から左へ、両方の要素を浮動させることで要素の順序を逆にすることです。

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

最後に、親にclearfixを追加すれば完了です（完全な解決策については フィドル を参照してください）。

一般的に、絶対位置を持つ要素が親要素の一番上に配置されている限り、要素を浮動させることで回避策を見つけることができます。

12
lex82

Feeela は正しいですが、このようにdivの位置を逆にすると、親のdivを子要素に縮小/拡大することができます。 ：

.parent{
    postion: 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 */
}

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

9
ChrisC

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

親のdivにはnone：displayを指定して、child1とchild2の内容を相対divに複製するだけです。 child1_1とchild2_2と言います。 child2_2を一番上に、child1_1を一番下に配置します。

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

8
MMB

この問題を修正する非常に簡単なハックがあります

これが解決策を説明するcodesandboxです。 https://codesandbox.io/s/00w06z1n5l

HTML

<div id="parent">
  <div class="hack">
   <div class="child">
   </div>
  </div>
</div>

CSS

.parent { position: relative; width: 100%; }
.hack { position: absolute; left:0; right:0; top:0;}
.child { position: absolute; left: 0; right: 0; bottom:0; }

あなたは子供が自分自身を配置する場所に影響を与えるためにハックdivの位置で遊ぶことができます。

これがスニペットです：

html {
  font-family: sans-serif;
  text-align: center;
}

.container {
  border: 2px solid gray;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.stuff-the-middle {
  background: papayawhip
    url("https://camo.githubusercontent.com/6609e7239d46222bbcbd846155351a8ce06eb11f/687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67");
  flex: 1;
}

.parent {
  background: palevioletred;
  position: relative;
}

.hack {
  position: absolute;
  left: 0;
  top:0;
  right: 0;
}
.child {
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
    <div class="container">
      <div class="stuff-the-middle">
        I have stuff annoyingly in th emiddle
      </div>
      <div class="parent">
        <div class="hack">
          <div class="child">
            I'm inside of my parent but absolutely on top
          </div>
        </div>
        I'm the parent
        <br /> You can modify my height
        <br /> and my child is always on top
        <br /> absolutely on top
        <br /> try removing this text
      </div>
    </div>
2
bernatfortet

私は同様の問題を抱えていました。これを解決するために（本文、ドキュメント、またはウィンドウを使用してiframeの高さを計算する代わりに）、ページ全体のコンテンツをラップするdiv（たとえばid = "page"のdiv）を作成し、その高さを使用しました。

2
Juliano

私は別の解決策を思いつきました。それは私が好きではありませんが仕事を終わらせます。

重複が表示されないように、基本的に子要素を複製します。

<div id="parent">
    <div class="width-calc">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

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

CSS：

.width-calc {
    height: 0;
    overflow: hidden;
}

これらの子要素にマークアップがほとんど含まれていない場合、影響は小さくなります。

1
btx9000

「固定の高さを使用するか、JSを参加させる必要があります。」

これがJSの例です。

---------- jQuery JSの例--------------------

    function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
        var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();

        $(containerSelector).children().each(function (i){
            if (maxX < parseInt($(this).css('left')) + $(this).width()){
                maxX = parseInt($(this).css('left')) + $(this).width();
            }
            if (maxY < parseInt($(this).css('top')) + $(this).height()){
                maxY = parseInt($(this).css('top')) + $(this).height();
            }
        });
        return {
            'width': maxX,
            'height': maxY
        }
    }

    var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
    $("#SpecBody").width(specBodySize.width);
    $("#SpecBody").height(specBodySize.height);
1
Nikolay

純粋なJavaScriptでは、getComputedStyle（）メソッドを使用してstatic position子要素.child1の高さを取得して設定するだけです。 HTMLElement.styleプロパティを使用して、同じ子のpadding-topとして値を取得します。

上記の実際的な例については、次のコードスニペットを確認して実行してください。

/* JavaScript */

var child1 = document.querySelector(".child1");
var parent = document.getElementById("parent");

var childHeight = parseInt(window.getComputedStyle(child1).height) + "px";
child1.style.paddingTop = childHeight;
/* CSS */

#parent { position: relative; width: 100%; }
.child1 { width: auto; }
.child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
html, body { width: 100%;height: 100%; margin: 0; padding: 0; }
<!-- HTML -->

<div id="parent">
    <div class="child1">STATIC</div>
    <div class="child2">ABSOLUTE</div>
</div>
1
AndrewL64

これは@ChrisCが提案したことと非常によく似ています。絶対配置要素ではなく相対配置要素を使用しています。多分あなたのために働くことができる

<div class="container">
  <div class="my-child"></div>
</div>

そしてあなたのcssはこんな感じです：

.container{
    background-color: red;
    position: relative;
    border: 1px solid black;
    width: 100%;
}

.my-child{
    position: relative;
    top: 0;
    left: 100%;
    height: 100px;
    width: 100px;
    margin-left: -100px;
    background-color: blue;
}

https://jsfiddle.net/royriojas/dndjwa6t/

0
roy riojas

今これを行うためのより良い方法があります。あなたはbottomプロパティを使用することができます。

    .my-element {
      position: absolute;
      bottom: 30px;
    }
0
rlasch

次のアプローチも検討してください。

CSS：

.parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}

またdivを再配置しようとしているのでCSSグリッドを考慮してください

0
Iegor Benzyk