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


204

以下のCSSでわかるように、自分child2自身をの前に配置したいと思いchild1ます。これは、私が現在開発しているサイトがモバイルデバイスでも機能する必要があるためです。child2、モバイルデバイスのコンテンツの下に必要なナビゲーションが含まれているため、下部必要がです。-なぜ2つのマスターページではないのですか?これはdivsHTML全体で再配置される唯一の2つであるため、この小さな変更の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以外の方法でこれを実行する方法があるかどうかを確認します。


3
私は100%確実ではありませんが、おそらくchild2の高さを計算し、それに応じてchild1を移動するJSソリューションを使用する必要があると思います。
ビリーモート

2
これは、親の位置を相対に、子の位置を絶対に設定することで実行できます。
fungusanthrax

1
多分それが助けることができるこの回避策を参照してください。
Az.Youness

回答:


153

「絶対配置された要素がフローから削除され、他の要素によって無視されることを知っています。」したがって、絶対的に配置された要素に従って親の高さを設定することはできません。

高さが固定されているか、JSを使用する必要があります。


1
これは技術的に正しい方法であるとマークしていますが、問題の別の解決策が見つかりました。これは、差別化する必要がある特定のページに必要なCSSをネストすることです(現時点では40のうち2つ)。

16

を使用して要素にストレッチするposition: absoluteことはできませんが、同じ効果を得ながら絶対配置を回避できるソリューションがよくあります。あなたの特定のケースで問題を解決するこのフィドルを見てくださいhttp://jsfiddle.net/gS9q7/

トリックは、最初の要素を右に、2番目の要素を左にフローティングすることで要素の順序を逆にすることです。これにより、2番目の要素が最初に表示されます。

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

最後に、親にclearfixを追加すると完了です(完全なソリューションについては、フィドルを参照してください)。

一般に、絶対位置の要素が親要素の上部に配置されている限り、要素をフローティングすることで回避策を見つける可能性が高くなります。


10

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

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

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

jquery(または何でも)が絶対divを呼び出すときは、対応する相対div(child1_1またはchild2_2)をdisplay:block AND visibility:hiddenで設定するだけです。相対的な子は非表示のままですが、親のdivが高くなります。


2
これは正しい方向に私を考えさせました。私の場合、表示を設定します。「サイズホルダー」コンテンツに何もない場合、divはサイズ設定されませんが、不透明度:0は、divのサイズを正しく設定し、追加のjqueryを必要としません。
エデンコルビン

私が行った方法は、2つの重複したdivを取得することでした。最初の1つは絶対位置の可視コンテンツで、2つ目は可視性が非表示のdivであり、親divを正しい高さに保ち、すべて正常に機能します= D
Diogo Garcia

4

純粋なJavaScriptでは、getComputedStyle()メソッドを使用してstatic position子要素の高さを取得し、HTMLElement.styleプロパティを使用してその取得値を同じ子のとして設定するだけです。.child1padding-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>


3

この質問はflexboxの前に2012年に尋ねられました。最新のCSSを使用してこの問題を解決する正しい方法は、メディアクエリとモバイルデバイス用のフレックスカラム逆転を使用することです。絶対配置は必要ありません。

https://jsfiddle.net/tnhsaesop/vjftq198/3/

HTML:

<div class="parent">
  <div style="background-color:lightgrey;">
    <p>
      I stay on top on desktop and I'm on bottom on mobile
    </p>
  </div>
  <div style="background-color:grey;">
    <p>
      I stay on bottom on desktop and I'm on bottom on mobile
    </p>
  </div>
</div>

CSS:

.parent {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .parent {
    flex-direction: column-reverse;
  }
}

2

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


1

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

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

<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;
}

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


4
これにより、検索エンジンのランキングに問題が発生する可能性があります
mschadegg

1

「あなたは固定高さを使用するか、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);

この回答は、提案されたソリューションのより良い説明と方向付けから利益を得ることができます。
DaniDev 2018

1

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

ソリューションを示すコードサンドボックスは次のとおりです。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>


0

これを行うには、より良い方法があります。bottomプロパティを使用できます。

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

5
これは、あなたが知らない親の最終的な高さがわかっている場合にのみ機能します
machineaddict

0

これは、@ 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

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

CSS:

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

また、divを再配置しようとしているので、cssグリッドを検討してください


-2

絶対ビューは、静的に配置されていない最も近い祖先に対して自分自身を配置します(position: static)。したがって、特定の親に対して絶対ビューを配置したい場合は、親positionrelativeに、子をに設定positionしますabsolute


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.