3

I would like to have the footer image of my website stick to the bottom of the browser when the page content is short. Footer Image should stick to bottom of browser

The CSS code I have for that image is:

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

and it works perfectly for the pages where the content is longer.

I have tried using code from some tutorials out there but I have not been able to get the results I want. Is there a property I can add to that line of code to make the image stay at the bottom?

Thank you

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，看看什么可以解决您的问题。

首先，我将position:fixed;and添加bottom:0;到.footerdiv 类中。

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 回答