将父节点<div>展开到其子节点的高度

我有一个类似这样的页面结构:

<body>
  <div id="parent">
    <div id="childRightCol">
      /*Content*/
    </div>
    <div id="childLeftCol">
      /*Content*/
    </div>
  </div>
</body>

我想为父div扩大高度时，内部div的高度增加。

编辑: 一个问题是，如果子内容的宽度扩展超过浏览器窗口的宽度，我目前的CSS把一个水平滚动条上的父div。我希望滚动条是在页面级别。目前我的父div被设置为溢出:auto;

你能帮我做这个的CSS吗?

当前回答

对于那些不能从这个答案中找到答案的人:

尝试设置填充值大于0，如果子div有margin-top或margin-bottom，你可以用填充替换它

例如，如果你有

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

最好将其替换为:

#parent
{
    padding: 30px 0px 20px 0px;
}

2010-06-16 19:52:28

其他回答

#{母公司背景颜色:绿色; 高度:汽车; 宽度:300 px; 溢出:隐藏; ｝ # childRightCol { 颜色:灰色; 背景颜色:黄色; 保证金:10 px; 填充:10 px; ｝ < div id = "父" > < div id = " childRightCol " > < p > 我爱你，我爱你，我爱你。最后的结果就是最后的结果。 < / p > < / div > < / div >

你可以使用overflow:hidden;CSS中的属性

2015-08-27 12:35:39

加一个明确的:两者。假设你的列是浮动的。根据你的高度是如何指定的，你可能需要一个overflow:auto;

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>

2008-12-21 05:47:37

你正在寻找一个2列CSS布局?

如果是这样，看看说明，开始是非常简单的。

2008-12-21 06:08:42

正如Jens在评论中所说

另一个答案是如何使div不大于它的内容?……而且…… 建议设置display:inline-block。这对我来说很有效。- - - - - - Jens Jun 2在5:41

这对我来说在所有浏览器中都更好。

2013-10-11 09:42:12

试试这个方法，对我很管用。