How to keep footer always at the bottom of a page?

2019-06-06 01:26发布

站内问答 / HTML/CSS
1074 2 4

I have an image that is 115px that I want at the very bottom of my page. I searched online how to make it stay at the bottom of the page always and got a lot of complicated answers. I made with code of my own one that works (at least in my browser). I realize it might be an immature way to do it, and wanted to see if there were any potential problems with it. Here is my code

<div id="footer" style="position:fixed;top:100%;margin-top:-115px;left:0%;repeat:repeat-x;background:url(http://EXAMPLE.com/images/bottom-border.png);height:115px;width:100%;">
&nbsp;
</div>

标签： html css footer
举报
2条回答
Bombasti
2楼-- · 2019-06-06 02:01

Here is how you do the footer always at the bottom of page. You can replace footer with <div id="footer">...</div>, but I prefer HTML5 footer.

enter image description here

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        body { height: 100%;}
        footer {background: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5); 
                position: fixed; bottom: 0; left: 0; height:115px;width:100%; }
    </style>
</head>
<body>
    <footer>

    </footer>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
傲
3楼-- · 2019-06-06 02:17

you may want to consider what will happen if the body text is as long as the viewport height. The text might go behind the fixed footer and you may not be able to see it

I would recommend;

#footer { 
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
}

then make sure to give the div wrapping all the content has a padding bottom the same as the height of the footer.

#main { padding-bottom: 150px; }  /* must be same height as the footer */
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)