Question

所以有一个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>

Answer 1

背景是否适合内容？

enter image description here

Answer 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标记以显示效果

Answer 3

您应该添加以下代码：

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;
}

因为它的代码更清晰。

Div内容容器在内容结束前切断？

3 个答案: