我有一个类似这样的页面结构:
<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>
这是你想要的吗?
.childRightCol, .childLeftCol
{
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}
对于那些不能从这个答案中找到答案的人:
尝试设置填充值大于0，如果子div有margin-top或margin-bottom，你可以用填充替换它
例如，如果你有
#childRightCol
{
margin-top: 30px;
}
#childLeftCol
{
margin-bottom: 20px;
}
最好将其替换为:
#parent
{
padding: 30px 0px 20px 0px;
}
试试这个方法，对我很管用。
overflow:auto;
更新:
还有一个有效的解决方案:
家长:
display: table;
孩子:
display: table-row;
我让一个父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。
Add
clear:both;
添加到父div的css中，或者在父div的底部添加一个div，即清除:both;
这是正确答案，因为overflow:auto;可能工作于简单的网页布局，但会混乱的元素开始使用的东西，如负边距等
我使用这个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%;
正如Jens在评论中所说
另一个答案是如何使div不大于它的内容?……而且…… 建议设置display:inline-block。这对我来说很有效。- - - - - - Jens Jun 2在5:41
这对我来说在所有浏览器中都更好。
如果你在#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; }
#{母公司 背景颜色:绿色; 高度:汽车; 宽度:300 px; 溢出:隐藏; ｝ # childRightCol { 颜色:灰色; 背景颜色:黄色; 保证金:10 px; 填充:10 px; ｝ < div id = "父" > < div id = " childRightCol " > < p > 我爱你，我爱你，我爱你。最后的结果就是最后的结果。 < / p > < / div > < / div >
你可以使用overflow:hidden;CSS中的属性
这是规范所描述的功能-这里的几个答案是有效的，并与以下内容一致:
If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box that doesn't have margins collapsed through it and the bottom border-edge of the bottommost block-level child box that doesn't have margins collapsed through it. However, if the element has a nonzero top padding and/or top border, or is the root element, then the content starts at the top margin edge of the topmost child. (The first case expresses the fact that the top and bottom margins of the element collapse with those of the topmost and bottommost children, while in the second case the presence of the padding/border prevents the top margins from collapsing.) Similarly, if the element has a nonzero bottom padding and/or bottom border, then the content ends at the bottom margin edge of the bottommost child.
网址:https://www.w3.org/TR/css3-box/#blockwidth
试着给父母的高度max-content。
.parent{
height: max-content;
}
https://jsfiddle.net/FreeS/so4L83wu/5/
下面的代码对我有用。
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: auto或在父元素上使用min-height都可以。为了避免水平滚动条，可以通过在子元素上使用box-sizing: border-box或在父元素上使用overflow: hidden来避免由于填充或边框而导致的水平滚动条。 至于水平滚动条由于宽度的身体，如果你是使用宽度:100vw代替宽度:100%。
