如何使父级 div 根据子元素的高度自动调整高度？

Question

如何使父级 div 根据子元素的高度自动调整高度？

7

如何使父级div根据子元素的高度自动调整高度？

div#main{
    width: 970px;
    height: 100px;
    background: rgba(255,0,0,1);
    border: 5px solid rgb(251,151,117);
    margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
    padding: 10px       
}
div#left{width: 383px;
    height: 100%; 
    margin-right: 5px;
    background: rgb(0,0,255);
    float:left
}
div#description{width: 100%; 
    height: 50%; 
    background: rgb(0,0,0)  
}
div#following{width: 100%; 
    height: 50%; 
    background: rgb(0,255,0)  
}
div#posts{width: 577px;
    height: auto;
    margin-left: 5px;
    background: rgb(255,255,0);
    float: right
}

<div id="main">
    <div id="left" class="cell">

        <div id="description" class="cell">
        </div>

        <div id="following" class="cell">
        </div>

    </div>

    <div id="posts" class="cell"> 
      there are some contents here (height is set to auto)
    </div> 
</div>

- user679846

1

仅仅是看到那些代码块编辑后的滚动条就让我感到非常不舒服。 - BoltClock

@Joseph：你有什么问题吗？你发布了很多代码，但是标题与描述相比不够重要啊，这点一定要注意。 - Kyle

1

现在你减少得太多了，我们想看到相关的HTML和CSS。 - Kyle

不要在父元素上设置高度？ ;P - danjah

子元素的高度（设置为auto）如何影响父元素的高度？或者说像继承一样？LOL - user679846

显示剩余3条评论

3个回答

1

div#main{
         width: 970px;

         background: rgba(255,0,0,1);
         border: 5px solid rgb(251,151,117);
         margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
         padding: 10px       
    }

移除高度属性

- Vicky

0

CSS3

.container {
    display: inline;
    position: relative;
}

应该修复它。如果您希望它成为内联块，则使用inline-block。

- tscpp

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kyle · Accepted Answer

我为您制作了一个非常简单的示例，以演示变量父高度的工作原理。

.parent
{
    height: auto;
    border: 1px dashed #f00;
    padding: 5px;
}

.child
{
    height: 100px;
    border: 1px dashed #0f0;
}

<div class="parent">
    <div class="child">
    </div>
</div>

跟随现有的内容，你会做得很好。

在查看您的代码后，发现是浮动问题，您需要添加一个新的带有 clear: both; 属性的 div 到底部，以清除浮动并使 #main div 显示为填充。

查看示例。