通常，当父Div的子元素被浮动时，就会出现这个问题。以下是该问题的最新解决方案:

在你的CSS文件中写入下面的类。clearfix和伪选择器

.clearfix:after {
content: "";
display: table;
clear: both;
}

然后，在你的HTML中，添加.clearfix类到你的父Div中。例如:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

它应该一直工作。您可以将类名调用为.group而不是.clearfix，因为这将使代码更具语义性。注意，在双引号“”之间的Content值中不需要添加点甚至空格。另外，overflow: auto;也许可以解决问题，但它会导致其他问题，如显示滚动条，不建议使用。

来源:Lisa Catalano和Chris Coyier的博客

我不完全确定我是否理解了这个问题，因为这是一个相当直截了当的答案，但是……：）

您是否尝试过将容器的溢出属性设置为可见或自动?

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

添加这些内容可以将黑色容器推到动态容器所需的大小。 比起auto，我更喜欢可见，因为auto似乎自带滚动条。

这个问题可能很老了，但它值得更新。 这里有另一种方法:

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

#some_div {    
  height: fit-content;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

你也可以使用

 display: inline-block;

我的工作就是这个

试试这个:

body { 
    min-height:100%; 
    background:red; 
} 

#some_div {
    min-height:100%; 
    background:black; 
} 

IE6及之前版本不支持min-height属性。

我认为问题是，当你告诉主体的高度为100%时，它的背景只能和一个浏览器“视口”(不包括浏览器工具栏、状态栏、菜单栏和窗口边缘的查看区域)的高度一样高。如果内容高于一个视口，它将溢出专门用于背景的高度。

如果你的内容没有填满一整个页面的底部，主体上的min-height属性应该强制背景至少和一个视口一样高， 然而，它也应该让它向下生长，以包含更多的内部内容。