扩大母公司业务;和它的孩子们一样高

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

<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>

我希望当内部div的height增加时，父div在height中展开。

< p > 编辑: < br > 一个问题是，如果子内容的width扩展到浏览器窗口的width之后，我当前的CSS将一个水平滚动条放在父div上。我希望滚动条处于页面级别。目前我的父div被设置为overflow: auto;

你能帮我做这个的CSS吗?

542899 次浏览
小开

添加clear:both。假设你的列是浮动的。根据你的高度是如何指定的，你可能需要一个overflow:auto;

<body>
<div id="parent">
<div id="childRightCol">
<div>
<div id="childLeftCol">
<div>
<div id="clear" style="clear:both;"></div>
</div>
</body>
小开

你在找2列CSS布局吗?

如果是这样，看看的指令，它的开始非常简单。

小开

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

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

这是你想要的吗?

.childRightCol, .childLeftCol
{
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}
小开

对于那些不能在这个答案的指令中找出这一点的人:

尝试设置填充值更多的然后0，如果子div有margin-top或margin-bottom，你可以用padding替换它

例如，如果你有

#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。

小开

添加

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%;
小开

您必须在父容器上应用clearfix解决方案。这是一篇很好的文章，解释了修复链接

小开

正如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; }
小开

. 
#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>

你可以在css
中使用overflow:hidden;属性进行管理

小开

这是规范所描述的功能-这里的几个答案是有效的，并与以下内容一致:

如果它有块级的子框，则高度是没有折叠边距的最顶层块级子框的顶部边距和没有折叠边距的最底层块级子框的底部边距之间的距离。但是，如果元素有非零的顶部填充和/或顶部边框，或者是根元素，则内容从最上面的子元素的顶部边距开始。(第一种情况表示元素的顶部和底部边距与最顶部和最底部的子元素的边距一起折叠，而在第二种情况下，填充/边框的存在防止了顶部边距的折叠。)类似地，如果元素具有非零的底部填充和/或底部边框，则内容结束于最底部子元素的底部边缘。

从这里:https://www.w3.org/TR/css3-box/#blockwidth

小开

尝试给父母的身高__abc0。

.parent{
height: max-content;
}

https://jsfiddle.net/FreeS/so4L83wu/5/

小开

下面的代码对我有用。

css

.parent{
overflow: auto;
}

超文本标记语言

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

#childRightCol
{
float:right;
}
#childLeftCol
{
float:left;
}
#parent
{
display:inline;
}

小开

我们从哪里开始

这里有一些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版本的Internet Explorer的解决方案是将overflow: auto添加到父元素。这也适用于IE7，添加了滚动条。

/* Our Modified CSS.
* This is one way we can solve our problem.
*/


.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
overflow: auto;
/*This is what we added!*/
}


.floating-div {
float: left;
width: 50%;
}


.floating-div ul {
display: inline-block;
height: auto;
}

解决方案#2:浮动父容器

另一个适用于所有现代浏览器和IE7的解决方案是浮动父容器。

这可能并不总是可行的，因为浮动父div可能会影响页面布局的其他部分。

/* Modified CSS #2.
* Floating parent div.
*/


.containing-div {
background-color: #d2b48c;
display: block;
float: left;
/*Added*/
height: auto;
width: 100%;
/*Added*/
}


.floating-div {
float: left;
width: 50%;
}


.floating-div ul {
display: inline-block;
height: auto;
}

方法#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>

方法四:在父元素中添加清除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-height-child-floated-elements/

小开

与其设置height属性，不如使用min-height。

小开

在父元素上使用height: auto或使用min-height都可以工作。为了避免水平滚动条，可以通过在子元素上使用box-sizing: border-box或在父元素上使用overflow: hidden来避免由于填充或边框而导致的水平滚动条。 至于由于主体宽度而导致的水平滚动条，如果您使用width: 100vw，则使用width:100%.


提交答案