-1

重複の可能性:
HTML ページのフッターを最小の高さでページの下部にとどめる CSS

(ウェブサイトへのリンク: http://www.eastsidespeedway.weebly.com/ )

上記のリンクとブラウザの開発者ツールを使用して、html/css を表示してください。

ページのフッターをページの下部に配置しようとしています。現在はダウンしているように見えるかもしれませんが、それはページに収まっているからです。たとえば、/404.html にアクセスすると、ヘッダーのないページであり、フッターがページのほぼ中間にあることがわかります。コンテンツの追加などには Weebly を使用していますが、サイトの構築には Dreamweaver を使用しました。オンラインで複数のことを試しましたが、実際のコンテンツの上にフッターが表示されないようです。コンテンツの下にある必要があります。

ウェブサイトのレイアウトは次のようになります (例):

<div id="container>
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer-container>
  <div id="footer"></div>
</div>

フッターが別のコンテナーにあることがわかります。これは、コンテナの幅が 960px であるのに対し、ページの幅の 100% を表示する必要がある背景画像があるためです。

html/css初心者のため、よくわからなかったらすみません。

繰り返しますが、ヘルプが必要な場合は、ブラウザの開発者ツールを使用してください。：P

コメント、提案、回答をお待ちしております。

4

2 に答える 2

1

編集済み

<div id="wrapper">
  <header></header>
  <div id="main"></div>
  <footer></footer>
</div>

body, html, #wrapper { height: 100%;  } /* Create space for elements to be 100% */
#wrapper { display: table; } /* Create a table-structure */
#wrapper > * { display: table-row; } /* All direct children behave as rows */
#wrapper > header, 
#wrapper > footer { min-height: 100px; } /* These must be at least 100px */
#main { height: 100%; } /* Let the mid section fill up the remaining space */
于 2013-01-09T01:41:46.023 に答える
0

単に追加する#footer-container

position:absolute;
bottom:0px;

footerページの下部に配置します。

于 2013-01-09T01:43:14.000 に答える