代码之家 › 专栏 › 技术社区 › Steve Horn

将父级<div>扩展到其子级的高度

css html

261

Steve Horn · 技术社区 · 16 年前

我的页面结构与此类似:

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

我想为父母做点什么 div height div 的 身高 增加。

编辑:
width 子内容的扩展超过 宽度 在浏览器窗口中,我当前的CSS在父窗口上放置一个水平滚动条 overflow: auto;

你能帮我做这个CSS吗?

15 回复 | 直到 7 年前

587

Josh Crozier HBP 11 年前

为父母试试这个,对我来说很管用。

overflow:auto;

更新:

父母亲 :

display: table;

display: table-row;

Skotee 6 年前

试着给予 max-content

.parent{
   height: max-content;
}

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

Josh Crozier HBP 11 年前

clear:both . 假设您的列是浮动的。根据您的身高是如何指定的,您可能需要一个溢出:自动;

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

Community T.Woody 7 年前

正如延斯在评论中所说

另一个答案是 How to make div not larger than its contents? 而且建议设置显示:内联块。这对我很有效。

Community T.Woody 7 年前

对于那些无法在以下说明中理解这一点的人: this answer 在那里:

试着设置衬料价值更多 0

例如,如果你有

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

最好将其替换为:

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

Internet Marketing Boise 13 年前

添加

clear:both;

这是正确的答案,因为溢出:自动;可能适用于简单的web布局,但会干扰开始使用负边距等内容的元素

atiquratik jaywon 11 年前

使用类似于自我清除的东西 div this . 然后,您只需在父级上使用一个类。。。比如:

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

Jaad Chacra 4 年前

使用“最小高度”,而不是设置“高度”属性。

Eric 14 年前

这是你想要的吗?

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

lpfavreau Arthur Debert 16 年前

2 column CSS layout ?

the instructions ,这是非常简单的开始。

sth ACP 14 年前

例子:

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

基于main column div是#wrap最深的子div,这定义了#wrap div的深度,两侧的200px填充创建了两个大空白列,供您随意放置绝对定位的div。您甚至可以使用position:absolute更改填充顶部和底部,以放置页眉div和页脚div。

Suryansh Singh 3 年前

height: auto 或使用 min-height 在父元素上运行。为了避免由于填充或边框而导致的水平滚动条,可以使用 box-sizing: border-box 关于子元素或 overflow: hidden 至于水平滚动条造成的宽度,由于身体,以防您正在使用 width: 100vw 改用 width:100% .

Nikhil 11 年前

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

user3436572 10 年前

#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }

Adam Tolley 7 年前

其功能如规范所述-此处的几个答案是有效的,并与以下内容一致:

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

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

Community T.Woody 4 年前

下面的代码为我工作。

css

.parent{
    overflow: auto;
}

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

YourBestBet 5 年前

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

Benjamin Gakami 4 年前

我们从哪里开始

这里有一些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>

一个适用于所有现代浏览器和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;
}

另一种适用于所有现代浏览器和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/

-1

Colin Brock 11 年前

我使用此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%;

-1

Chintan Kotadiya 8 年前

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

您可以使用 overflow:hidden; css中的属性