Question

我希望当网页内容很短时，我的网站的页脚图像会粘在浏览器的底部。 Footer Image should stick to bottom of browser

我对该图片的CSS代码是：

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

它适用于内容较长的网页。

我尝试过使用一些教程中的代码，但是我无法得到我想要的结果。我可以添加一行属性来使图像保持在底部吗？

谢谢

Answer 1

尝试：

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

Answer 2

以下是jsfiddle，了解可以解决问题的方法。

首先我将position:fixed;和bottom:0;添加到.footer div类。

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

如何使背景图像贴在浏览器的底部

2 个答案: