html - 如何让背景图片贴在浏览器底部-6ren

html - 如何让背景图片贴在浏览器底部

转载作者：可可西里更新时间：2023-11-01 13:11:39

当页面内容较短时，我希望将我网站的页脚图片固定在浏览器底部。 Footer Image should stick to bottom of browser

我为该图像准备的 CSS 代码是:

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

它非常适合内容较长的页面。

我已经尝试使用一些教程中的代码，但无法获得我想要的结果。有没有我可以添加到该行代码的属性，使图像停留在底部？

谢谢

最佳答案

尝试:

position: fixed;
bottom: 0;

对于 CSS 中的页脚

我也推荐你read this article如果以上内容不符合您的口味，一般来说:

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