16

例： http： //jsfiddle.net/MYvYy/182/

'outer_box'の中に'inner_box'要素がたくさんあります。Inner_box要素は絶対です。

すべてのinner_box要素がouter_boxに収まるようにouter_boxの高さを調整したいと思います。

私はそれがjsでできることを知っています。しかし、私はスクリプトでスタイルを調整するのは本当に好きではありません。

それで、CSSを使用して実行できるかどうか疑問に思いましたか？

4

5 に答える 5

14

この問題にはいくつかの回避策があります。状況に合わない可能性がありますが、検討することを検討してください。まず最初に、親をその高さまで延長させたい
すべての絶対位置のdivを複製する必要があります。だからあなたHTMLはこのように見えるでしょう。

<div class="outer_box">
    <div class="inner_box">1</div>
    <div class="inner_box ghost">1</div>
</div>

次に、次のように「ghostdiv」CSSを追加する必要があります。

.inner_box.ghost{
    visibility: hidden;
    width: 100%;
    top: 0;
    left: 0;
    position: relative;
}
于 2015-04-28T10:04:25.893 に答える
12

CSSだけでは不可能です。

レイアウトフロー：

の要素position:absoluteは、ページの残りの部分のレイアウトフローの外側にあります。相対的な親に関する限り、絶対的な子はレイアウト内のスペースを占有しません。

これは、コンテナのレイアウトに影響を与えないため、ポップアップまたはナビゲーションメニューをコンテナ内にネストする必要がある場合に非常に便利です。position:absoluteこれは、適切なユースケースの一種です。

固定高さ：

絶対コンテンツをレイアウトフローの一部であるかのように動作させる必要がある場合は、固定の高さを使用します。相対的な親と絶対的な子に固定の高さを与え、絶対的な子の前に可変の高さの子要素を配置しないようにします。可変高さのコンテンツがその前にある場合は、絶対子を表示する必要がある場所で、高さが固定された相対プレースホルダーdivを使用します。

position:absolute使用する必要があり、固定の高さがオプションでない場合は、JavaScriptを使用してください。

于 2012-07-15T13:34:12.170 に答える
3

jQuerylibを使用してこれに対するJavscript修正を提供することしかできません。使用するかどうか教えてください、

$('.outer_box').height($('.inner_box').outerHeight());

この行はouter_boxの高さを修正します

于 2012-07-15T13:37:26.423 に答える
0

固定高さの方法を試しましたが、小さな画面では重なっています。そこで、オーバーレイの背景レイヤーを設定して、ディビジョンとコンテンツを別のディビジョンに分離することで、この問題を解決しました。

<div style="position:relative; background-color: blue; background-image:url('banner.png'); background-size:cover; background-position: center top;">
    <div style="position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:#00000099;"></div>
    <div style="position:relative;z-index:2;"><h1 style="color:#fff;">Hello</h1></div>
</div>

Codepenにコードをアップロードしました：https ：//codepen.io/shahbaz8x/pen/GRjEBze

于 2020-12-19T06:44:34.827 に答える
-1

div.inner_boxのpositionプロパティを次のように変更して修正しました

position:relative

これがあなたが探しているものではない場合、またはこれがそれを修正しなかった場合は、Javascriptを使用する必要があります。

于 2012-07-15T12:58:58.333 に答える