1

フッターをページの下部に保持しようとしています。最初に試した方法では、フッターがページの下部の上にあり、背景が表示されました。これは position:static; でした。(次の画像のように)

ここに画像が入ります

私が試した 2 番目の方法は、絶対フッターを使用することです。これにより、スクロールするのに十分なコンテンツがないページの下部にフッターが配置されますが、スクロールのあるページでは、読み込まれるとウィンドウの下部に配置され、コンテンツの上に表示されます。ページ。

これが私の現在のコードです：

<div id="container">
    <div id="content">
        <div id="slideshow"></div>
        <div id="clear"></div>
        <div id="boxes">
            <div id="box">
                <div id="boxheader"></div>
                <div id="box1" class="box"></div>
            </div>
            <div id="box">
                <div id="boxheader"></div>
                <div id="box2" class="box"></div>
            </div>
            <div id="box">
                <div id="boxheader"></div>
                <div id="box3" class="box"></div>
            </div>
        </div>
        <div id="clear"></div>
    </div>
</div>
<div id="footer">Content</div>

ここにCSSがあります

div#container{
  position:relative;
  margin: 4px;
}
#boxes{
  width: 960px;
  margin: 50px auto 0px auto;
}
#footer {
  clear: both;
  margin-top: 50px;
  bottom: 0;
  left: 0;
  height: 200px;
  background-color: #fff;
  width: 100%;
}

追加情報が必要な場合はお知らせください。

4

2 に答える 2

-1

以下の記事で説明されている方法を何度も使用しましたが、問題はありませんでした。

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

それが役に立てば幸い！

于 2013-02-05T03:31:55.513 に答える