0

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

3 回答 3

0

背景是否适合内容？

在此处输入图像描述

于 2013-03-05T00:51:01.550 回答
0

尝试使用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;
}

如果我错了， 这里的示例演示就是你想要实现的纠正我
注意：添加更多h1标签以显示效果

于 2013-03-05T00:57:05.413 回答
0

您应该添加以下代码：

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

.content_container {
   min-height: 100%;
}

演示

我也改变了：

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

至：

.content_container {
   margin: 0 auto;
}

因为它的代码更简洁。

于 2013-03-05T07:01:48.533 回答