0

私は以前のSOの投稿とタットを調べましたが、自分のコードではうまくいきませんでした。私のフッターは（ウィンドウではなく）ページの下部に貼り付けられません。コンテンツがフッターをスクロールしたくありません。ページサイズは長さが大きく異なるため、常に下部にフッターを配置する必要があります。

leftcol、rightcol、およびfooterはすべてコンテナー内にあります。どんな助けでも素晴らしいでしょう。

私のHTMLは次のように構成されています。

<body>
 <div id = "container">
  <div id = "leftcol">
      <h2></h2>
       </p>
  </div>
  <div id = "rightcol">
      <h2></h2>
      </p>
   </div>
   <div id ="footer">
       <p>...........</p>
   </div>
 </div>
</body>

これが私のCSSです：

body {
    font-family: 'Rokkitt', Georgia, serif;
    font-size: 16px;
    background-color: #FFFFFF;
    line-height: 1.3em;
    height: auto;
    color: #252525;
    }

#container {
    display: block;
    width: 1024px;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
    }

#leftcol {
    display: block;
    float: left;
    margin: 20px 5px 5px 15px;
    width: 660px;
    position: absolute;
    height: auto;
    padding-bottom: 20px;
    }

#rightcol {
    display: block;
    float: right;
    margin: 30px 5px 5px 780px;
    position: absolute;
    width: 275px;
    height: auto;
    }

#footer {
    position: fixed;
    bottom: 0;
    width: 1024px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    }
4

4 に答える 4

2

見ましたか？

http://www.cssstickyfooter.com/

これは私のために働いた

于 2012-10-15T12:54:31.370 に答える
2

これはそこにある最良の解決策です

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

于 2012-10-15T13:11:22.517 に答える
2

フッターをコンテナ要素とボディ要素の外側に移動し、position：absoluteを使用する必要があります。およびbottom：0; 常にhtml要素の下部に修正します。

ボディの外側では、主にボディタグはhtml要素の高さを取りますが、そうでないバージョンのIEもあります。HTMLを貼り付けていないので、明らかに改訂されたhtmlを表示することはできませんが、cssは次のようになります。

#footer {
    position: absolute;
    bottom: 0;
    width: 1024px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    }
于 2012-10-15T13:23:28.953 に答える
1

このフィドルを確認してください：http：//jsfiddle.net/9Wy8G/13/

これは、あなたの望むことですか？

更新：このSO投稿
を 確認してください。あなたはそれが役に立つと思うかもしれません。

于 2012-10-15T13:13:30.623 に答える