0

AIM : 多くの要因に基づいてフッターを配置したい。ここで見つけることができます

1）ページにコンテンツがない場合（または1行または2行）、画面の下部にフッターを配置したい. (下にスクロールせずにフッターを表示 - スクロールバーなし)

2) ページに非常に多くのコンテンツがある場合、フッターはコンテンツの最終行よりも相対的に下に配置する必要があります。したがって、フッターはコンテンツに応じて位置を調整する必要があります。

注: フッターは、画面サイズ/解像度が異なるさまざまなシステムで一貫している必要があります... (ネットブックはラップトップとは画面サイズが異なります)。

その他の情報 ----> #footer が入っている #footer_outer があります。

#frame {
    margin:0 auto;
    width:962px;
    margin-top:10px;
    height:auto;
}

#content {
    padding:5px 5px 5px 5px;
    margin:0 auto;
    width:890px;
    height:auto;
    min-height: 372px; /* i use this to have footer at the bottom of **my** screen when there is not much content. */
}

#footer_outer{
    width:100%;
    background:#444;
    padding:10px 0 0 0;
    height: 130px;
    position:relative;  /*to put footer_outer 50px below the content*/
    top: 50px;
    bottom:0px;
}

#footer {
    margin:0 auto;
    width:834px;
    height:auto;
    overflow:hidden;
}

この CSS の変更を手伝ってください。どうもありがとうございました！

4

4 に答える 4

0

次のようにページコンテナを定義してみてください。height：100％; 位置：相対;

次に、そのコンテナ内に、フッターのdiv幅、position：absoluteを配置します。下：0px;

于 2010-07-01T13:57:54.390 に答える
0 
 <style>
  #wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* fix negative height */
  }
  #footer, #push {
    height: 100px; /* fix positive height */
    clear: both;
    background:#000;
  }
 </style>

<div id="wrapper">
  <p>content here.</p>
  <div id="push"></div>
</div>
<div id="footer">
  footer
</div>

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ </p>

于 2010-06-30T09:28:28.363 に答える
0

この5つの異なるソリューションをチェックして、あなたに最適なものを選んでください

1～4はこちら

ここにもう一つ

于 2010-06-30T09:44:50.647 に答える
0

コンテンツの長さが可変であるため、特に画面サイズごとに異なるものにしたい場合は、JavaScript を使用する以外に方法がありません。最初にビューポートの高さを確認し、次に #content の高さを確認し、それらの数値に基づいて必要なフッターに合わせて計算する必要があります

于 2010-06-30T09:53:22.017 に答える