2

私のコンテンツには 2 つのシナリオがあります

1) コンテンツが少ないので、ページの下部にフッターが必要です。

2) たくさんのコンテンツがあり、すべてのコンテンツの後にフッターが必要です (つまり、スティッキー フッターではありません)。

CSS を試してみましたが、画像とテキストが浮かんでいるため、機能しないと思います。

JavaScript を使用してフッターの問題を修正できますか?

4

4 に答える 4

2

これは、私が遭遇したこの種のフッターの中で最も堅牢な (そして非常にシンプルな) フッターです。

http://ryanfait.com/sticky-footer/

さまざまなプロジェクトで正常に使用されています - IE6 までテストされており、他のすべてのコンテンツとは関係なく、最新のすべてのブラウザーで動作します。

于 2013-06-24T07:49:33.107 に答える
0

min-heightページのコンテンツでa を使用します。多くの変更がなければ、通常の画面解像度でしか機能しませんが (a を px で指定するため)、通常は、フッターをピクセルで完全なmin-height通常の量だけ押し下げることが望ましいだけです。min-height

于 2013-06-24T07:49:19.217 に答える
0

これが最短の方法だと思います：

HTML:

<html>
<body>
    <div id="header">
    </div>

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

    <div id="footer">
    </div>
</body>
</html>

CSS

html,body{
    width:100%;
    height:100%;
}
#header{
    height:100px;
    background-color:#00ff00;
    width:100%;
}

#content{
 width:100%;
 border:1px solid red;
 min-height:calc(100% - 200px);
 min-height:-moz-calc(100% - 200px);
 min-height:-webkit-calc(100% - 200px);
 min-height:-o-calc(100% - 200px);
}

#footer{
    height:100px;
    background-color:#0000ff;
    width:100%;
}
于 2013-06-24T09:28:44.373 に答える