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 上设置一个浮点数。将此添加到您的CSS：

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

并从 #right 内容中删除 inline-block ：

#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 的主要问题是最大高度。您需要为父 DIV 指定正确的高度。如果你想要基于分辨率的动态 CSS，你需要使用 JS 更新你的高度。提示检查这个

jQuery屏幕分辨率高度调整