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

标签 html css wordpress footer sticky-footer

当页面内容较短时,我希望将我网站的页脚图片固定在浏览器底部。 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;
}

关于html - 如何让背景图片贴在浏览器底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19959322/

相关文章:

html - Bootstrap AngularJS 如果没有 li 则隐藏 ul

php - WordPress MediaWiki Cookie 集成

html - WordPress 中的 CSS Circle Mods,在哪里插入代码?

wordpress - 更新使用 Subversion 跟踪的 WordPress

html - 媒体查询对每个浏览器的行为不同

html - CSS - 固定粘性 header 中的居中容器

Javascript:单击后更改按钮文本更改

html - CSS:特殊流体布局问题

css - 删除 google chrome 和 safari 中文本框的默认设置

html - 使用 emmet 缩写创建颜色