为什么子 div 会溢出其父 div？ [关闭]答案

【问题标题】：Why does child div overflow its parent div? [closed]为什么子 div 会溢出其父 div？ [关闭]
【发布时间】：2012-12-21 04:17:00
【问题描述】：

我已经盯着这个问题看了一段时间，但无济于事我能想出一个保持网站流动性的解决方案。

我要为#right-content 完成的工作是填充其父级内部的所有可用空间高度，即#bottom-container。所以它保持流动性。

但是给它一个min-height:100% 会使它溢出父级。

可以在以下链接找到现场示例

Live Example

我试图完成的静态示例。

Static Example

【问题讨论】：

标签： html css

【解决方案1】：

你的 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 Screen Resolution Height Adjustment

【讨论】：

干杯，但不，如果找不到维持液体流动的解决方案，我将使用您的第一个#right-content 示例。除了#right-contnet 之外，关于Live Example 的每个部分的大小都会从1280x800 自动调整为1920x1080。
参见max-height，您在first CSS 中提到的是NOT 出现在Second CSS 中，这可能是问题所在，因为您需要指定父div 的高度，如果您是使用卷轴，这就是我的想法
是的，我尝试过它非常适合； 1920x1080，但在 1280x800 Example
看，你选择了 680 作为最大高度，这对 1080 分辨率来说是好的，但是到了 800，它就会失败。您需要根据屏幕分辨率计算高度，检查以下问题，您将获得相同的帮助。 stackoverflow.com/q/1271675/699695
我想要完成的是让#right-content 占据包含 div 的可用重命名高度的 100%。所以它动态调整大小的方式与当前#container 基于浏览器高度的方式以及layout 的方式非常相似。但是内容从div中溢出。用它强制#bottom-container 下来。但将#container 留在它应该在的地方。我试图基于 % 和硬数字的所有内容都是它可以工作的参数。

【解决方案2】：

在#mCSB_1 上尝试以下 css，

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

【讨论】：

我的代码中的任何地方都没有这种风格。不过谢谢。
相信我，我试过了，我不会让任何帮助白白浪费掉。但无论我将其放入何种样式，它都无法正常工作
@Khaos 抱歉回复晚了是在度假，问题是你有一些 inline styling 元素，这优先于你添加的样式，你会最好去掉内联样式

【解决方案3】：

您需要在#left-content 上设置一个浮点数。将此添加到您的 CSS：

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

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

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

这将保持右侧容器的液体格式。

【讨论】：

仍在推过父容器。谢谢Link
我一定对您要做什么感到困惑。 #left-content 和#right-content 没有父容器。请再解释一下。
静态例子不应该有，但活的应该有