如何使背景图片固定在浏览器底部？

Question

如何使背景图片固定在浏览器底部？

3

当网页内容较短时，我希望我的网站底部图片可以固定在浏览器底部。

Footer Image should stick to bottom of browser

我为该图片编写的CSS代码如下：

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

对于内容更长的页面，它完美地工作。

我尝试过使用一些教程中的代码，但我没能得到想要的结果。是否有一个属性可以添加到那行代码中，使图像保持在底部？

谢谢

- Juan Andres

2个回答

0

以下是jsfiddle链接，你可以查看该链接以解决你的问题。

首先，我在 .footer div类中添加了 position:fixed; 和 bottom:0; 属性。

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;
}

- rileychuggins

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SW4 · Accepted Answer

尝试：

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;
}