我有一个类似这样的页面结构:
<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>
我想为父div扩大高度时，内部div的高度增加。
编辑: 一个问题是，如果子内容的宽度扩展超过浏览器窗口的宽度，我目前的CSS把一个水平滚动条上的父div。我希望滚动条是在页面级别。目前我的父div被设置为溢出:auto;
你能帮我做这个的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%;
其他回答
您必须在父容器上应用clearfix解决方案。这里有一篇很好的文章解释了修复链接
我们从哪里开始
这里有一些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: auto或在父元素上使用min-height都可以。为了避免水平滚动条，可以通过在子元素上使用box-sizing: border-box或在父元素上使用overflow: hidden来避免由于填充或边框而导致的水平滚动条。 至于水平滚动条由于宽度的身体，如果你是使用宽度:100vw代替宽度:100%。
加一个明确的:两者。假设你的列是浮动的。根据你的高度是如何指定的，你可能需要一个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; }
