3

ページ コンテンツが短い場合に、Web サイトのフッター イメージをブラウザーの下部に固定したいと考えています。 フッター画像はブラウザの下部に固定する必要があります

その画像のCSSコードは次のとおりです。

#site-container {width:100%; background:url(.../site-bg-foot.jpg) no-repeat left bottom;}

コンテンツが長いページでは完璧に機能します。

いくつかのチュートリアルのコードを使用してみましたが、必要な結果を得ることができませんでした。そのコード行に追加して、画像を一番下に表示できるプロパティはありますか?

ありがとうございました

4

2 に答える 2

3

試す：

position: fixed;
bottom: 0;

CSS のフッター用

大まかに言えば、上記があなたの好みに合わない場合に備えて、この記事を読むこともお勧めします。

HTML

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}
于 2013-11-13T16:37:17.860 に答える
0

問題を解決できるものを確認するためのjsfiddleを次に示します。

まず、div クラスにposition:fixed;andを追加しました。bottom:0;.footer

HTML:

<div class="content">
<p>Praesent aliquam varius dolor.</p>
</div>

<div class="footer">Curabitur interdum, lorem quis feugiat interdum.
</div>

CSS:

body {
    margin:0;
}
.content {
    width: 100%;    
    margin-bottom: 1em;
}

.footer {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: #e5e5e5;
}
于 2013-11-13T16:45:35.850 に答える