web-dev-qa-db-ja.com

コンテナ<DIV>の高さを自動調整して、絶対位置に配置された子<DIV>に対応します。

コンテナDIVの高さを自動調整して、絶対配置の子DIVに対応する方法はありますか？私は次のようなものを手に入れたいです

 + ----------------------- + 
 |コンテナ| 
 | + ------ + + ------ + | 
 | | chld | | chld | | 
 | | 1 | | 2 | | 
 | | | | | | 
 | + ------ + + ------ + | 
 | + ------ + | 
 | | chld | | 
 | | 3 | | 
 | | | | 
 | + ------ + | 
 + ----------------------- +

私は次のようなものを試します：

<div class="container" style="position: relative; border: solid thin">
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 5px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 30px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 15px; top: 30px;
                             border: dashed thin;"></div>
</div>

ただし、「コンテナ」divの高さはゼロのままです。絶対に配置すると要素がフローから「取り出される」ため、これは予想される動作である可能性があることを理解していますが、これに対する回避策はありますか？ （結果の高さを事前計算して手動で設定する場合を除く）

htmlcsslayout
29
Dmitry Avtonomov

Position absoluteの代わりにposition：relativeを使用すると、要素が存在するページ構造に空のスペースが残り、このスペースは移動した要素の高さになります。

したがって、chld1とchld2をフロートさせて横に並べ、上下にパディングを追加してchld 3を押し下げ、相対的な位置を使用してそれらを分割し、任意の高さに移動できます。次に、chld3でclear bothを使用します。

何かのようなもの

#exp_outer {
  width: 400px;
  border: 1px solid black;
}
#chld1 {
  float: left;
  margin: 30px 0 20px;
  left: 50px
}
#chld2 {
  float: right;
  margin: 30px 0 20px;
  right: 50px;
}
#chld3 {
  left: 150px;
  clear: both;
}
.box {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px solid black;
}
<div id="exp_outer">
  <div id="chld1" class="box">Child1</div>
  <div id="chld2" class="box">Child2</div>
  <div id="chld3" class="box">Child3</div>
</div>
9
wheresrhys

オーバーフロー：自動

これは新しいclearfixメソッド、FYIです。ただし、コンテナを常にtallest＆absolutely located子。

10
Ahmad Bagadood

私は最終的にclearfixを使用しましたが、これによりコンテナの希望の幅を設定でき、コンテンツに応じて高さが自動的に調整されます（これはすべてのブラウザで機能します）

<style>
        .inner_box {
            position: relative;
            float: left;
            width: 50px; 
            height: 50px; 
            border: dashed thin;
            margin: 5px 5px 5px;
            text-align: center;
        }

        .outer_box {
            position: relative; 
            top: 200px;
            border: solid thin; 
            width: 190px;
            //height: 1%;
        }

        .outer_box:after {
            content: '.'; 
            display: block; 
            clear: both; 
            visibility: hidden; 
            height: 0; 
            line-height: 0;
        }
    </style>

<div class="outer_box">
    <div class="inner_box">1</div>
    <div class="inner_box">2</div>
    <div class="inner_box">3</div>
    <div class="inner_box">4</div>
    <div class="inner_box">5</div>
    <div class="inner_box">6</div>
</div>
4
Dmitry Avtonomov

いいえ。全体的な考え方は、絶対配置の要素はその親レイアウトに影響を与えないということです。

Divの絶対配置ではなく、floatを相対的に配置して目標を達成してください。フロートの開始位置がass 0,0ではないため、それほど便利ではありませんが、機能します。

2
buti-oxa

私はこれを達成するのにかなり苦労しましたが、今ではとても簡単だったように見えるソリューションがありますが、とにかく、jQuery/Javascriptが必要です：

jQuery(window).load(function(){
    var valueCheck = [];
    jQuery('.projectsWrap .hentry').each(function(){
        var itemObj = jQuery(this);
        var itemValues = itemObj.position();
        var top = itemValues.top;
        var height = jQuery(this).height();
        var sum = top + height;
        valueCheck.Push(sum);
    });
    var res = Math.max.apply(Math, valueCheck);
    jQuery('.projectsWrap').height(res);
});

WordPressテーマでこの小さなスクリプトを作成して実装したため、互換性のために「$」は「jQuery」に変換されますが、WordPress =「$」に戻す必要があります。

ユーザーがコンテナ内の各要素を自律的に完全に配置することを望んでおり、DOMに表示される要素の順序はコンテナ内の位置に関係していないため、私がいる状況は問題の状況よりもさらに困難でした：結果（domの最初の要素は、たとえばウィンドウの最後の下部要素として表示される場合があります）。

また、要素の高さはすべて異なり、すべて異なる高さとすべて異なる最高値（オフセット）であり、悪夢でした。

スクリプトが行うことは、各要素の高さと最高値を取得し、それらを合計してこの合計を配列に入れることです。その後、配列をチェックして最大値を見つけます。この値は、コンテナに設定される高さです

1
Nicola

この小さな問題に対する単純な純粋なJavaScriptの回避策が見つからなかったため、ここに来ます（HTMLコードにidフィールドを追加する必要があります）。

var containerBox = document.getElementById('container');
var statBoxBottom = document.getElementById('chld3').getBoundingClientRect().bottom + window.scrollY;
var mainDivBottom = containerBox.getBoundingClientRect().bottom + window.scrollY;
var boxHeightDiff = statBoxBottom - mainDivBottom;
if (boxHeightDiff > 0) 
    containerBox.style.height = Math.ceil( containerBox.offsetHeight + boxHeightDiff ) + 'px';

基本的に、「chld3」の絶対的なボトム位置に基づいて「コンテナ」の高さを増やします。

0
Konrad Gałęzowski