css

Question

我的页面结构类似于：

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

当内部div的{{1}}增加时，我希望父height扩展div。

修改
一个问题是，如果子内容的height扩展超过浏览器窗口的width，我当前的CSS会在父width上放置一个水平滚动条。我希望滚动条位于页面级别。目前我的父div设置为div

你可以帮我解决这个问题吗？

Answer 1

为父母试试这个，它对我有用。

overflow:auto;

<强>更新

另一个有效的解决方案：

<强>父：

display: table;

儿童：

display: table-row;

Answer 2

添加clear:both。假设您的列是浮动的。根据父级指定的高度，您可能需要溢出：auto;

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

Answer 3

正如Jens在评论中所说的那样

另一个答案是How to make div not larger than its contents? ......而且它建议设置display：inline-block。这对我很有用。 - Jens Jun 2 at 5:41

在所有浏览器中，这对我来说效果更好。

Answer 4

尝试给出max-content作为父母的身高。

.parent{
   height: max-content;
}

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

Answer 5

对于那些在this answer的指示中无法弄清楚这一点的人：

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

例如，如果你有

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

用p替换它会更好：

#parent
{
    padding: 30px 0px 20px 0px;
}

Answer 6

使用类似自我清除div之类的内容非常适合像this这样的情况。那么你只需要在父母上使用一个类......如：

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

Answer 7

添加

clear:both;

到父div的css，或在父div的底部添加一个div，它确实清除：both;

这是正确答案，因为溢出：auto;可能适用于简单的网页布局，但会混淆那些开始使用负边距等内容的元素

Answer 8

您在寻找2 column CSS layout吗？

如果是这样，请查看the instructions，这对于开始来说非常简单。

Answer 9

我通过将子div作为没有任何定位属性（例如绝对指定）的单个列，使父div扩展到子div的内容。

示例：

#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}

基于maincolumn div是#wrap的最深子div，它定义了#wrap div的深度，两侧的200px填充创建了两个大的空白列，供您根据需要放置绝对定位的div。您甚至可以使用position：absolute。

更改填充顶部和底部以放置标题div和页脚div

Answer 10

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

Answer 11

如果#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; }

Answer 12

这正如规范所描述的那样起作用 - 这里的几个答案是有效的，并且与以下内容一致：

如果它具有块级子项，则高度是最顶层块级子框的顶部边框边缘之间的距离，该边框边缘没有通过它折叠的边距和最底部的底部边缘没有边距的块级子框通过它折叠。但是，如果元素具有非零顶部填充和/或顶部边框，或者是根元素，则内容从最顶层子节点的上边缘开始。（第一种情况表示元素的顶部和底部边缘与最顶部和最底部的子边缘折叠，而在第二种情况下，填充/边框的存在阻止顶部边缘折叠。）同样，如果element具有非零底部填充和/或底部边框，然后内容结束于最底部子项的底部边缘。

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

Answer 13

这样做你想要的吗？

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

Answer 14

下面的代码对我有用。

css

.parent{
    overflow: auto;
}

html

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

Answer 15

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

Answer 16

我们的出发地

这里有一些样板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：溢出：自动

一种适用于所有现代浏览器以及Internet Explorer到IE8的解决方案是将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>

方法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-height-child-floated-elements/

Answer 17

使用min-height代替设置height属性。

Answer 18

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

Answer 19

我将这个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%;

Answer 20

#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;属性来管理您

将父<div>扩展为其子项的高度</div>

20 个答案:

css

html