CSSが絶対配置された子の高さを取る

Question

コンテナがmax-width:780pxに設定されていて、高さが宣言されていません。コンテナの中には、画像スライドショーがあります。ページ上のすべてが反応するので、幅が小さくなると画像（幅は100％に設定されます）が高さのコンテナを調整します。

スライドショーの変更は、いかなる創造的な解決策は、子要素の高さを取るためにそこにありますdisplay:static;、それはコンテナ

の内容として見ていないので、もはやコンテナ「のオープンを保持」position:absolute;への画像ですそれは絶対に位置づけられていますか？

以下の例では、メインコンテナに宣言された高さはありません。何も開いていません。 http://dhut.ch/test/santos/

ありがとう！

Answer 1

絶対位置を削除します。私はインライン・スタイリングも避けています。

Answer 2

あなたのアプローチを変更する方がよいでしょう。スライダの場合、コンテナの子要素を浮動させ、親の大きな崩壊を防ぐために既知の技法の1つを使用することがベストプラクティスです。

1. div#main {overflow: hidden;}
2. div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
3. 追加：だから、私はあなたはそれが子供の包含することを強制するためにこれらの方法のいずれかを使用し、その後、画像からposition: absolute CSSルールを削除し、あなたの<div id='main'>内でそれらをフロートすることを示唆しています<div style='clear: both;'>をメインのdivコンテナの最後に追加します。

Answer 3

画像はすべて同じ寸法ですか？ 「はい」の場合、画像を含む要素に％padding-topを使用できます。

#main { 
    position: relative; 
    max-width: 760px; 
    padding-top: 65.789%; 
} 

この作品の理由：それは割合としてのようなものに変換でしょう760分の500 = 0.65789

だそう

あなたのイメージが言う、すべてのであれば、背の高い500pxなどによって広い760px、 paddingの場合は、パーセントで設定されているため、の割合がと計算されます。要素の幅が縮小するにつれて、高さは比例して縮小し、ボックスは幅と高さの同じ比率にとどまります。絶対に配置された画像は、ボックスの高さに追加されません。

あなたの画像がすべて同じアスペクト比であり、比率が変更されることを期待していない限り、これは機能します。たくさんのランダムな画像を使用する場合、これはあなたのためではありません。

Answer 4

私は最近、Zurb Foundationのテンプレートページの上部に絶対的な位置付けをして、フローから外して寸法をリセットするために必要な画像に同様の問題がありました（画像は、代わりに親の.rowパディングで囲まれている）。しかし、もちろん、これは、その下のすべての流体応答要素が画像の上に上に上がったことを意味しました。マージン・トップを設定するか、または以下の兄弟要素を配置することは、ブラウザの幅でサイズ変更されなかった堅い上部スペースを意味していました。

絶対位置の画像の直後に画像の複製を配置し、その画像を設定してくださいvisibility: hidden;高さの違いを補うために余分なマージンボトムを少し追加する必要がありましたが、最終結果ページ上のすべてが使用中の画像の高さまで正確に流れています。

私はまた、上記のunexplainedBacnで説明されているパディングトリックを使用しました。これはまた素晴らしいトリックです。それは数学的なものですが、私はその答えに投票しました。素晴らしい解決策。