html - 子divが親divをオーバーフローするのはなぜですか？

Question

私はこれをしばらく見つめてきましたが、ウェブサイトの流動性を維持するソリューションを思いつくことはできません。

#right-content親の内側の利用可能なすべてのスペースの高さを埋めるために私が達成しようとしていることは、#bottom-containerです。そのため、流動性を維持します。

しかし、それを与えると、min-height:100%それは親をオーバーフローさせます。

実例は次のリンクで見つけることができます

実例

私が達成しようとしていることの静的な例。

静的な例

Answer 1

次のCSSを試してみてください#mCSB_1。

#mCSB_1
{
    position: relative;
    height: 500px;
    max-width: 100%;
    overflow: hidden;
}

Answer 2

＃left-contentにfloatを設定する必要があります。これをCSSに追加します。

#left-content {
float:left;
width:700px;
}

#rightコンテンツからインラインブロックを削除します。

#right-content {
margin-left:750px;
display:block
min-width:250px;
}

これにより、右側のコンテナへの液体フォーマットが維持されます。

Answer 3

あなたのCSSが主な問題です

次のCSSはあなたが達成したいURLからのものです

#right-content {
display: inline-block;
width: 38%;
font-size: 14pt;
font-family: Verdana;
max-height: 600px;
vertical-align: top;
padding: 5px;
float: right;
margin-right: 25px;
overflow: hidden;
}

そしてCSSに従うことはあなたが持っているものの形です

#right-content {
display: inline-block;
width: 36%;
font-family: Verdana;
height: 99.99%;
vertical-align: top;
padding: 5px;
}

これがあなたに先に進むためのいくつかの手がかりを与えることを願っています

編集-1

CSSの主な問題はmax-heightです。親DIVの正しい高さを指定する必要があります。解像度ベースの動的CSSが必要な場合は、JSを使用して身長を更新する必要があります。ヒントについてはこれを確認してください

jQueryの画面解像度の高さ調整