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

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

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

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

你能帮我做这个的CSS吗?


当前回答

下面的代码对我有用。

css

.parent{
    overflow: auto;
} 

html

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div id="clear" style="clear:both;"></div>
</div>

其他回答

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

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

如果你在#childRightCol和#childRightCol中的内容是向左或向右浮动的,只需将其添加到css中:

#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }

Add

clear:both; 

添加到父div的css中,或者在父div的底部添加一个div,即清除:both;

这是正确答案,因为overflow:auto;可能工作于简单的网页布局,但会混乱的元素开始使用的东西,如负边距等

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

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

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

overflow:auto; 

更新:

还有一个有效的解决方案:

家长:

display: table;

孩子:

display: table-row;