我有一个类似这样的页面结构:
<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>
我想为父div扩大高度时，内部div的高度增加。
编辑: 一个问题是，如果子内容的宽度扩展超过浏览器窗口的宽度，我目前的CSS把一个水平滚动条上的父div。我希望滚动条是在页面级别。目前我的父div被设置为溢出:auto;
你能帮我做这个的CSS吗?
当前回答
加一个明确的:两者。假设你的列是浮动的。根据你的高度是如何指定的，你可能需要一个overflow:auto;
<body>
<div id="parent">
<div id="childRightCol">
<div>
<div id="childLeftCol">
<div>
<div id="clear" style="clear:both;"></div>
</div>
</body>
其他回答
试试这个方法，对我很管用。
overflow:auto;
更新:
还有一个有效的解决方案:
家长:
display: table;
孩子:
display: table-row;
您必须在父容器上应用clearfix解决方案。这里有一篇很好的文章解释了修复链接
下面的代码对我有用。
css
.parent{
overflow: auto;
}
html
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
<div id="clear" style="clear:both;"></div>
</div>
我们从哪里开始
这里有一些HTML和CSS样板。在我们的例子中，我们有一个父元素和两个浮动子元素。
/* The CSS you're starting with may look similar to this. * This doesn't solve our problem yet, but we'll get there shortly. */ .containing-div { background-color: #d2b48c; display: block; height: auto; } .floating-div { float: left; width: 50%; } .floating-div ul { display: inline-block; height: auto; } <!-- The HTML you're starting with might look similar to this --> <div class="containing-div"> <div class="floating-div"> <ul> <li>List Item One</li> <li>List Item Two</li> <li>List Item Three</li> <li>List Item Four</li> </ul> </div> <div class="floating-div"> <ul> <li>List Item Five</li> <li>List Item Six</li> <li>List Item Seven</li> <li>List Item Eight</li> </ul> </div> </div>
解决方案#1:溢出:自动
一个适用于所有现代浏览器和IE8的解决方案是在父元素中添加overflow: auto。这也适用于IE7，添加了滚动条。
/*我们修改的CSS。 这是我们解决问题的一种方法。 * / .containing-div { background - color: # d2b48c; 显示:块; 高度:汽车; 溢出:汽车; /*这是我们添加的!* / ｝ .floating-div { 浮:左; 宽度:50%; ｝ .float -div ul { 显示:inline-block; 高度:汽车; ｝
解决方案#2:浮动父容器
另一个适用于所有现代浏览器和IE7的解决方案是浮动父容器。
这可能并不总是可行的，因为浮动父div可能会影响页面布局的其他部分。
/*修改CSS #2。 *浮动父div。 * / .containing-div { background - color: # d2b48c; 显示:块; 浮:左; / *添加* / 高度:汽车; 宽度:100%; / *添加* / ｝ .floating-div { 浮:左; 宽度:50%; ｝ .float -div ul { 显示:inline-block; 高度:汽车; ｝
方法#3:在浮动元素下面添加清除Div
/* * CSS to Solution #3. */ .containing-div { background-color: #d2b48c; display: block; height: auto; } .floating-div { float: left; width: 50%; } .floating-div ul { display: inline-block; height: auto; } /*Added*/ .clear { clear: both; } <!-- Solution 3, Add a clearing div to bottom of parent element --> <div class="containing-div"> <div class="floating-div"> <ul> <li>List Item One</li> <li>List Item Two</li> <li>List Item Three</li> <li>List Item Four</li> </ul> </div> <div class="floating-div"> <ul> <li>List Item Five</li> <li>List Item Six</li> <li>List Item Seven</li> <li>List Item Eight</li> </ul> </div> <div class="clear"></div> </div>
方法4:在父元素中添加清除Div 这个解决方案对于较老的浏览器和较新的浏览器都是非常安全的。
/* * CSS to Solution #4. */ .containing-div { background-color: #d2b48c; display: block; height: auto; } .floating-div { float: left; width: 50%; } .floating-div ul { display: inline-block; height: auto; } /*Added*/ .clearfix { clear: both; } .clearfix:after { clear: both; content: ""; display: table; } <!-- Solution 4, make parent element self-clearing --> <div class="containing-div clearfix"> <div class="floating-div"> <ul> <li>List Item One</li> <li>List Item Two</li> <li>List Item Three</li> <li>List Item Four</li> </ul> </div> <div class="floating-div"> <ul> <li>List Item Five</li> <li>List Item Six</li> <li>List Item Seven</li> <li>List Item Eight</li> </ul> </div> </div>
从https://www.lockedownseo.com/parent - div - 100身高的孩子elements/——浮动
与其设置height属性，不如使用min-height。
