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

次のコードを追加する必要があります。

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 に答える
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 に答える