扩大父母＜div＞达到孩子的高度_div height由孩子-优快云博客

本文探讨了如何让HTML中父div的高度自动适应其内部子div的高度变化，尤其是在子内容宽度超过浏览器窗口宽度时避免父div出现水平滚动条的问题。通过使用特定的CSS属性和clearfix解决方案，可以实现这一目标，确保滚动条仅出现在页面级别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文翻译自：Expanding a parent

to the height of its children

I have a page structure similar to this: 我有一个类似于此的页面结构：

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

I would like for the parent div to expand in height when the inner div 's height increases. 我希望父div height在内部div的height增加时扩展。

Edit: 编辑：
One problem is that if the width of the child content expands past the width of the browser window, my current CSS puts a horizontal scrollbar on the parent div . 一个问题是，如果width子内容的扩展过去的width的浏览器窗口，我目前的CSS使水平滚动条上的父div 。 I would like the scrollbar to be at the page level. 我希望滚动条位于页面级别。 Currently my parent div is set to overflow: auto; 目前，我的父div设置为overflow: auto;

Can you please help me with the CSS for this? 您能帮我用CSS吗？

#1楼

参考：

#2楼

I use this CSS to parent and it works: 我使用此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%;

#3楼

You have to apply the clearfix solution on the parent container. 您必须在父容器上应用clearfix解决方案。 Here is a nice article explaining the fix 这是一篇很好的文章，介绍了修复

#4楼

As Jens said in comment 正如詹斯在评论中所说

An alternative answer is 一个替代答案是 … and it proposes to set display:inline-block. …并建议设置display：inline-block。 Which worked great for me. 这对我来说很棒。 – Jens Jun 2 at 5:41 –詹斯6月2日5:41

This works far better for me in all browsers. 在所有浏览器中，这对我来说都更好。

#5楼

If your content inside #childRightCol and #childRightCol are floated left or right, just add this into css: 如果您在#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; }

#6楼

Does this do what you want? 这是您想要的吗？

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

扩大父母 ＜div＞ 达到孩子的高度

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

扩大父母＜div＞达到孩子的高度