web-dev-qa-db-ja.com

内側の絶対的な高さに対して相対的なdivの高さを調整するにはどうすればよいですか？

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

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

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

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

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

htmlcsscss-position
13
Arturs Vancans

CSSだけでは不可能です。

レイアウトフロー：

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

これは、コンテナーのレイアウトに影響を与えないため、ポップアップまたはナビゲーションメニューをコンテナー内にネストする必要がある場合に非常に役立ちます。これは、position:absoluteが適している使用例です。

固定高さ：

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

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

11
Matt Coughlin

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

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

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

.inner_box.ghost{
    visibility: hidden;
    width: 100%;
    top: 0;
    left: 0;
    position: relative;
}
10
Abood Sy

私は、jQuery libを使用して、これに対するJavscript修正のみを提供できます。使用するかどうかを教えてください。

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

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

3
Alaa Badran