1

ページの一番下に必要な 115px の画像があります。常にページの下部に表示されるようにする方法をオンラインで検索したところ、多くの複雑な回答が得られました。私は（少なくとも私のブラウザでは）動作する独自のコードで作成しました。それを行うには未熟な方法である可能性があることを認識しており、潜在的な問題があるかどうかを確認したかった. これが私のコードです

<div id="footer" style="position:fixed;top:100%;margin-top:-115px;left:0%;repeat:repeat-x;background:url(http://EXAMPLE.com/images/bottom-border.png);height:115px;width:100%;">
&nbsp;
</div>
4

2 に答える 2

1

ページの下部に常にフッターを配置する方法を次に示します。に置き換えることができますがfooter、<div id="footer">...</div>私は HTML5 を好みますfooter。

ここに画像の説明を入力

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        body { height: 100%;}
        footer {background: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5); 
                position: fixed; bottom: 0; left: 0; height:115px;width:100%; }
    </style>
</head>
<body>
    <footer>

    </footer>
</body>
</html>
于 2013-02-19T15:30:24.703 に答える
0

本文がビューポートの高さと同じ長さの場合にどうなるかを検討することをお勧めします。テキストが固定フッターの後ろに隠れて見えなくなる可能性があります

私がお勧めします;

#footer { 
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
}

次に、すべてのコンテンツをラップする div に、フッターの高さと同じパディングの下部があることを確認してください。

#main { padding-bottom: 150px; }  /* must be same height as the footer */
于 2013-02-19T15:15:25.620 に答える