11

絶対配置された要素の親が折りたたまれないようにするにはどうすればよいですか?

次のコードでは、外側の div の高さは 0 です。

<div id="outer" style="position: relative;">
    <div id="inner" style="position: absolute; height: 100px;">
        <p>This is the inner content.</p>
    </div>            
</div>

これは、フロート要素の親が崩壊しないようにするにはどうすればよいですかという質問に非常に似ています。、浮動要素を処理しますが、いくつかの解決策 (スペーサー、および clearfix クラスを含む) を試しましたが、機能しません。

ありがとう！

4

2 に答える 2

4

できません: 子が絶対位置にあると、実質的に親の「外側」になります (外観上)。

jquery が含まれている場合にできることは、この洗練されていないハックを使用することです。

$(".absolutepos").each(function() {
    $(this).parent().css("height",$(this).height());
});

divを絶対位置に配置するときに「absolutepos」クラスを追加します。

<div id="outer" style="position: relative;">
    <div id="inner absolutepos" style="position: absolute; height: 100px;">
        <p>This is the inner content.</p>
    </div>            
</div>
于 2012-11-27T00:34:20.407 に答える
3

あなたができること：私が「二重子育て」と呼んだものによって：

同様の課題で、外側の相対オブジェクト (フロートを親にする) と、共有 (相対) 親の 0,0 から始まる相対親と同じ寸法の絶対定義ボックスを定義することになりました: 同一のコピーフロートの外側の制限を無視できるオブジェクトを配置できるという利点があります（動的フロートの幅に関係なく、オブジェクトをページの中央に配置する必要がありました。）

「二重の子育て」により、両方の問題が解消されました。

  1. 絶対的な親はフロートの高さを取得できませんでした (ただし、フロートに適応できた相互の親の高さ)。
  2. 相対的な親は、オブジェクトをページの中央に配置できませんでした (フロート間の中央のみを検出し、中央に配置されたコンテンツがフローティング オブジェクトの境界を越えないようにします)。

中央のボックスを維持しながら、このセットアップがどのように押しつぶされたり圧迫されたりするかを示すフィドル(ドキュメントを含む)を実行しました。基本的な考え方は、以下のコードで概説されています。

html (補足: div の順序 (左-中央-右、中央-右-左、...) は関係ありません。)

<header>
     <div class="header-left">left</div>
     <div class="header-center">
        <div class="centerinner">middle</div>
     </div>
     <div class="header-right">right</div>
</header>

CSS

header {
    position:relative; /* shrinkwrap to contained floats */
    /* display: block  /* no need to state this here */
    width: 100%;
    margin:0;
    padding:0;
    vertical-align: top;
    /* background-color: papayawhip; /* Debug */
}
.header-left { /* top left of header. header adapts to height */
    float:left;
    display:block;
    /* width and padding as desired */
}
.header-center { /* absolute reference for container box */
    position:absolute;
    left: 0;
    width: 100%;
    height:100%;
    /* background-color: gainsboro; /* Debug */
}
.centerinner { /* centered within absolute reference */
    margin-left:45%;
    margin-right:45%;
    padding-left: 1ex;
    padding-right: 1ex;
    background-color: #D6A9C9;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    height:100%;
}
.header-right {
    float:right;
    text-align: right;
    padding-left: 1ex;
    color: forestgreen;
 /* background-color: #D6F2C3; /* Debug */
}
于 2014-09-14T19:51:31.557 に答える