浮动元素不占用父元素内部的空间，顾名思义，它们是浮动的!因此，如果显式地没有为其子元素浮动的元素提供高度，则父元素将出现缩小并似乎不接受子元素的维度，如果其给定overflow:hidden;它的子节点可能不会出现在屏幕上。有很多方法可以解决这个问题:

在被浮动元素下面插入另一个元素，使用clear:both;财产，或使用清楚:两者;On:被浮动元素的后面。 使用显示:inline-block;或者用flex box代替float。

通常我认为这可以通过在#items_list的最后一个子元素上强制执行clear:both规则来解决。

你可以使用:

#items_list:last-child {clear: both;}

或者，如果你使用的是动态语言，在创建列表本身的循环中生成的最后一个元素中添加一个额外的类，这样你就会在html中得到这样的东西:

<div id="list_item_20" class="last_list_item">

和css

.last_list_item {clear: both; }

以下应该工作:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}

我将Bootstrap添加到一个项目中，其中的section标签设置为屏幕高度的100%。它工作得很好，直到我使项目响应，在这一点上，我借用了jennyfofenny的答案的一部分，所以当屏幕尺寸在较小的屏幕上改变时，我的部分背景与内容的背景相匹配。

我的新section CSS看起来是这样的:

section {
    // min-height so it looks good on big screen
    // but resizes on a small-screen
    min-height: 100%;
    min-height: 100vh;
    width:100%;
    width:100vh;
}

假设你有一个特定颜色的区域。通过使用min-height，如果部分的宽度因为屏幕变小而缩小，部分的高度将扩大，内容将保持在部分内，背景将保持所需的颜色。

你可以使用CSS网格布局。目前支持范围相当广:在caniuse上检查它。

下面是jsfiddle的示例。还有大量文本的例子。

HTML代码:

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

CSS代码:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
// style stuff

#clear_div{clear:both;

在内部div的div标签后添加这个新的下面的div

<div id="clear_div"></div>

http://www.w3schools.com/cssref/pr_class_clear.asp:获取更多信息