div内容容器在内容结束之前切断？答案

【问题标题】：Div content container cuts off before end of content?div内容容器在内容结束之前切断？
【发布时间】：2013-02-19 05:47:45
【问题描述】：

所以有一个 div 基本上是页面的主要内容，但它不会延伸到其中内容的底部。我尝试了很多不同的东西，但不确定我是否有错误的 CSS 属性组合以使其正确显示。有人请提供解释。下面是html和css。

    <html>
<head>
    <title></title>
    <style type="text/css">
    body{
font-family: 'Raleway', sans-serif;
height:100%;
position:relative;
background:url("../image/la_woodlands.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
background-attachment: fixed;
overflow-x:hidden;
}

.main_content_wrapper{
position:relative;
}

.content_container{
position:relative;
left:50%;
top:0;
margin-left:-480px;
width:920px;
padding:30px 20px;
height:100%;
display:block;
background:rgba(41,41,41,.8);
}

.content_section_header{
position:relative;
top:20px;
}



    </style>
</head>
<body>

    <div class="main_content_wrapper">
 <div class="content_container">


  <h1 class="align_center"></h1>

  <div class="content_section_header">
  <h1 class="align_center times">Catalog</h1>
  <div class="catalog_navigation">
  <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
  </div>
 </div>

 <h1>fjebgrewgre</h1>
  <h1>fjebgrewgre</h1>
   <h1>fjebgrewgre</h1>
    <h1>fjebgrewgre</h1>
     <h1>fjebgrewgre</h1>
      <h1>fjebgrewgre</h1>
       <h1>fjebgrewgre</h1>
        <h1>fjebgrewgre</h1>
         <h1>fjebgrewgre</h1>
          <h1>fjebgrewgre</h1>
           <h1>fjebgrewgre</h1>
            <h1>fjebgrewgre</h1>
             <h1>fjebgrewgre</h1>
              <h1>fjebgrewgre</h1>

</div>
</div>

</body>
</html>

【问题讨论】：

没有拉伸是什么意思？ jsfiddle.net/tjfNU
带有白色背景的主要内容容器停在一定高度，所以当我有足够的内容时，它不会将容器拉伸到足以让我的内容后面有白色背景。换句话说，它不会垂直拉伸
请更新您的 HTML 以向我们展示内容不会“拉伸”的情况。我在这里尝试了几件事，jsfiddle.net/nZcsE/1，但一切看起来都很好。
我刚刚将我发布的代码复制并粘贴到一个原始 html 文件中，但它仍然不会拉伸。尝试将 css 背景 rgb 更改为 (41,41,41)，也许你会看到。此外，我在内容中有大约 14 个
标记，只是为了添加一些虚拟内容，并且在第 6 个标题附近，背景停止了。我这边出了点问题，我真的不知道还能做些什么来提供帮助。我很抱歉造成混乱，但这是我能想到的唯一解释方法，它几乎就像内容包含一个固定的高度，我的标题在它的底部之外流动
@Lowkase 我已经更新了我在浏览器中测试过的 html，但它不起作用。我使用的 html 和 css 已在问题中更新！只需将其复制并粘贴到您的文本编辑器并在浏览器中运行即可

标签： html css height overflow

【解决方案1】：

您应该添加以下代码：

html, body {
     height: 100%;
     min-height: 100%;
}

.content_container {
   min-height: 100%;
}

Demo

我也变了：

.content_container {
    left:50%;
    top:0;
    margin-left:-480px;
}

到：

.content_container {
   margin: 0 auto;
}

因为它的代码更简洁。

【讨论】：

【解决方案2】：

尝试使用float.content_container，这样如果您添加内容，.content_container 的高度会自动调整

.content_container{
float:left;
position:relative;
left:50%;
top:0;
margin-left:-480px;
width:920px;
padding:30px 20px;
display:block;
background:rgba(255,255,255,.9) no-repeat;
}

这里的示例demo 如果我错了，这是你想要达到的目标吗？
注意：添加更多h1标签以显示效果

【讨论】：

【解决方案3】：

背景是否适合内容？

【讨论】：