将父母<div>展开到子女的身高
我有一个类似于这样的页面结构：
<body> <div id="parent"> <div id="childRightCol"> /*Content*/ </div> <div id="childLeftCol"> /*Content*/ </div> </div> </body> 当内格height增加的时候，我想让父母的height在height上展开。
编辑：
一个问题是，如果子内容的width扩展超过了浏览器窗口的width ，我当前的CSS会在父div上放置一个水平滚动条。 我希望滚动条处于页面级别。 目前我的父div被设置为overflow: auto;
你能帮我用这个CSS吗？
试试这个为父母，它为我工作。
overflow:auto;
更新：
还有一个解决scheme：
父母 ：
display: table;
孩子 ：
display: table-row;
添加一个clear:both 。 假设你的列是浮动的。 根据你的身高是如何指定的父母，你可能需要一个溢出：auto;
<body> <div id="parent"> <div id="childRightCol"> <div> <div id="childLeftCol"> <div> <div id="clear" style="clear:both;"></div> </div> </body>
正如延斯在评论中所说
另一个答案是如何使div不大于其内容？ …并build议设置display：inline-block。 这对我来说很好。 – Jens Jun 2 5:41
这对我来说在所有的浏览器上都好得多。
对于那些不能从这个答案的说明中找出这个问题的人 ：
尝试设置填充值多于 0 ，如果子div有margin-top或margin-bottom，则可以用填充replace它
例如，如果你有
#childRightCol { margin-top: 30px; } #childLeftCol { margin-bottom: 20px; }
将它更换为：
#parent { padding: 30px 0px 20px 0px; }
加
clear:both;
对于父div的CSS，或者在父div的底部添加一个div来清除：both;
这是正确的答案，因为溢出：汽车; 可能适用于简单的网页布局，但会混淆开始使用诸如负边距等元素
使用像自清理div这样的情况是完美的。 那么你只需要在父类上使用一个类就可以了：
<div id="parent" class="clearfix">
你在寻找2列CSS布局 ？
如果是这样，看看说明 ，这是非常简单的启动。
我做了一个父div展开一个div div的内容，通过把child div作为一个没有绝对指定的定位属性的列。
例：
#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;} #maincolumn {width:400px;}
基于maincolumn div是#wrap最深的子div，它定义了#wrap div的深度，两边的200px填充将为您创build两个大空白列，让您将绝对位置的div放入其中。 你甚至可以改变填充的顶部和底部放置头div和页脚div使用position：absolute。
这是做你想要的吗？
.childRightCol, .childLeftCol { display: inline-block; width: 50%; margin: 0; padding: 0; vertical-align: top; }
我使用这个CSS父，它的工作原理：
min-height:350px; background:url(..http://img.dovov.cominner/details_middle.gif) repeat-y 0 0 ; padding:5px 10px; text-align:right; overflow: hidden; position: relative; width: 100%;
您必须在父容器上应用clearfix解决scheme。 这里是一个很好的文章解释修复链接
如果#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; }
这是规范描述的function – 这里的几个答案是有效的，并符合以下内容：
如果它具有块级子元素，那么高度就是最顶级块级子框的上边框边缘与没有边框的边框之间的距离，最下面的块级子框的下边框边缘那边没有利润空间。 但是，如果元素具有非零的顶部填充和/或顶部边框，或者是根元素，则内容将从顶部的顶部边缘开始。 （第一种情况表示元素的顶部和底部边距与最顶层和最底层子元素的边缘倒塌，而在第二种情况下，填充/边界的存在防止顶层边缘塌陷。）类似地，如果元素具有非零的底部填充和/或底部边界，则内容结束于最底部小孩的底部边缘边缘。
从这里： https ： //www.w3.org/TR/css3-box/#blockwidth
#parent{ background-color:green; height:auto; width:300px; overflow:hidden; } #childRightCol{ color:gray; background-color:yellow; margin:10px; padding:10px; }
<div id="parent"> <div id="childRightCol"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat. </p> </div> </div>
