に設定されたコンテナがありmax-width:780px、高さが宣言されていません。コンテナの中には、画像のスライドショーがあります。ページ上のすべてがレスポンシブであるため、幅が減少すると、画像 (幅が 100% に設定されている) が高さコンテナーを調整します。
スライドショーは画像を変更し、コンテナーのコンテンツとして表示されないため、コンテナーを「開いたままにする」ことはありませんdisplay:static;。 position:absolute;
絶対に配置された子要素の高さを取得するための創造的なソリューションはありますか?
以下の例では、メイン コンテナーで高さが宣言されていません。何も開いていません。 http://dhut.ch/test/santos/
ありがとうございました！
画像はすべて同じ寸法ですか？はいの場合padding-top、画像を含む要素にパーセンテージを使用できます。
したがって、画像がすべて、たとえば幅760ピクセル、高さ500ピクセルの場合、500/760=.65789になります。
これはパーセンテージとして次のように変換されます。
#main {
position: relative;
max-width: 760px;
padding-top: 65.789%;
}
これが機能する理由は、パーセンテージで設定されている場合、幅paddingのパーセンテージとして計算されるためです。要素の幅が縮小すると、高さも比例して縮小し、ボックスは幅と高さの同じ比率のままになります。絶対に配置された画像は、ボックスの高さに追加されません。
これは、画像がすべて同じアスペクト比であり、その比率が変わることを期待していない限り機能します。ランダムな画像をたくさん使用する場合、これは適していません。
最近、Zurb Foundation のテンプレート化されたページの上部に画像を絶対的に配置して、フローから引き出してそのサイズをリセットする必要があるという同様の問題がありました (画像を囲む代わりに、ラッパーの端まで伸ばす必要がありました)。親の .row padding による)。ただし、もちろん、これは、その下にあるすべての流体応答要素が画像の真上に飛び出すことを意味していました. margin-top を設定するか、兄弟要素を下に配置すると、ブラウザーの幅に合わせてサイズが変更されない固定された上部スペースが意味されます。
それを回避するために、絶対位置の画像の直後に画像の複製を配置しvisibility: hidden;、高さの違いを補うために少し余白を下に追加する必要がありましたが、最終結果はページ上のすべてです使用中の画像の高さまで正確に流れます。
上記の unexplainedBacn で説明されているパディング トリックも使用しましたが、これも優れたトリックです。少し数学が必要ですが、私はその答えに投票しました。優れたソリューション。
やり方を変えたほうがいいと思います。スライダーのベスト プラクティスは、コンテナーの子要素をフロートし、既知の手法の 1 つを使用して親の大きな崩壊を防ぐことです。したがって、position: absolute画像から CSS ルールを削除して 内にフロートし<div id='main'>、これらの方法のいずれかを使用して強制的にその子を含めることをお勧めします。
div#main {overflow: hidden;}div#main:after {content: ''; display: block; clear: both; visibility: hidden;}<div style='clear: both;'>メインの div コンテナーの末尾にa を追加します。絶対位置を削除します。インラインスタイリングも避けます。