为什么子div溢出其父div?

时间:2012-12-21 04:17:01

标签: html css

我已经盯着这一段时间了一段时间并且无济于事我能想出一个能够保持网站畅通的解决方案。

我正在努力为#right-content填充其父级#bottom-container内的所有可用空间高度。所以它保持流动性。

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

可以在以下链接中找到实例:

Live Example

我试图实现的一个静态例子。

Static Example

3 个答案:

答案 0 :(得分:0)

#mCSB_1上尝试以下css,

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

答案 1 :(得分:0)

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

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

并从#right内容中删除内联块:

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

这将保持液体格式到正确的容器。

答案 2 :(得分:0)

您的CSS是一个主要问题

以下CSS来自您想要实现的网址

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

jQuery Screen Resolution Height Adjustment