2

私は自分のサイトを次のように構成しました。

<body>

   <div class="main">

      <div class="header">
          content
      </div> 

      <div class="section">
         content
      </div>

      <div class="sidebar">
         content
      </div>

      <div class="clearing"></div>

      <div class="footer">
         content
      </div>
   </div>
</body>

そしてCSS

.main {
        position:relative;
        width:908px;
        margin-top:0px;
        border:solid 0px;
        margin:0 auto;
    }

.header {

        position:relative;
        height:200px;
        margin: auto;
    }


  div.section {
            float:left;
        position:absolute;
        width: 584px;
        height:500px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align:left;
        }

  div.sidebar{
        float:right;
        position:relative;
        width: 324px;
        height:500px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align:left; 
    }

   .clearing {

        clear:both;
    }



   .footer {
    position:relative;
    left:0px;
    top:0px;
    width:908px;
    height:300px;
   }

div セクションにコンテンツを追加すると、フッター全体が表示されます。フッターはその時点で固定され、コンテンツが追加されるとページが大きくなり、フッターはそのまま残ります。

コンテンツを追加するたびに私がしなければならないことは、css ファイルでセクションの高さまたはサイドバーの高さのいずれかを増やすことです。それは正しいことのようです。セクションの高さとサイドバーが大きくなるにつれて、フッターが押し下げられます。

ただし、セクションに追加するコンテンツに高さを割り当てると、おそらくセクション自体の高さとは関係がないため、フッターの位置には影響しません。

追加されるコンテンツが占有するスペースにフッターを応答させ、自動的に移動してページの下部に残す方法はありますか?

4

3 に答える 3

0

これを試して：

.footer {
position:relative;
left:0;
bottom:0;
width:908px;
height:300px;

}

また、0 を入れる場合は px を付ける必要はありません。

于 2013-05-08T17:36:19.583 に答える
0

私はCSSコードをチェックしておりposition、すべてのdiv. divs
他にも 影響するのでバランスをとってみてください。

.footer{
   clear: both
}
于 2013-05-08T18:33:47.637 に答える