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

<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;
}

其他回答

我让一个父div围绕子div的内容展开,方法是将子div作为一列,不具有任何定位属性(如绝对指定)。

例子:

#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}

基于主列div是#wrap最深的子div,这就定义了#wrap div的深度,两边的200px填充为你创建了两个大的空白列,供你放置绝对定位的div。你甚至可以使用position:absolute来改变顶部和底部的填充来放置页眉div和页脚div。

下面的代码对我有用。

css

.parent{
    overflow: auto;
} 

html

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

使用像自清除div这样的东西非常适合这种情况。然后你只需在父类上使用一个类…如:

<div id="parent" class="clearfix">

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

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

我使用这个CSS来父,它工作:

min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;   
text-align:right;
overflow: hidden;
position: relative;
width: 100%;