CSS Footer on Bottom of Page [duplicate]

2019-04-17 05:33发布

站内问答 / HTML/CSS
995 6 4

This question already has an answer here:

Currently, I'm trying to get the footer (#bottom-wrap) of this page - to stay on the bottom of said page.

Obviously on a smaller page, it floats to the top, but on a larger page, it is fine at the bottom. For example:

I'd like this to be sustainable across all screen sizes, so min-size: xpx won't really cut it I don't think. I've toyed around with absolute and relative positioning, but I can't seem to get it working across both pages without cutting off the data on the larger page.

6条回答
Rolldiameter
2楼-- · 2019-04-17 05:48

Here you go. Footer stick to bottom. Just use this code:

#bottom-wrap {
    position: absolute;
    width: 100%;
    bottom: 0px;
 }
查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
3楼-- · 2019-04-17 05:51

Just like the link:

#bottom-wrap {
position: absolute;
width:100%;
height:300px;
bottom:0px;
}

For fixed bottom:

#bottom-wrap {
position: fixed;
width:100%;
height:300px;
bottom:0px;
}
查看更多
0人赞 添加讨论(0) 举报
戒情不戒烟
4楼-- · 2019-04-17 06:00

Have a look at the my answer to THIS question. You can easily adapt my "push element" solution. It works in all browsers includet ie7 and all widths.

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
5楼-- · 2019-04-17 06:08 
#bottom-wrap {
     position: absolute;
     width: 100%;
     height: auto;
     max-height: 300px;
     bottom: 0px;
}
查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
6楼-- · 2019-04-17 06:09

I made sticky footer using this tutorial. I think it's easy and convenient to use.

CSS CODE

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

HTML CODE

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

DEMO URL

查看更多
0人赞 添加讨论(0) 举报
兄弟一词,经得起流年.
7楼-- · 2019-04-17 06:14

Although some of the solutions in other answers work, they have various shortcomings — like for example requiring a certain HTML structure apart from the main content and the footer bits.

Flexbox (Flexible Box Layout Module) is the layout technique meant to deal with situations exactly like the sticky footer pattern.

Check out Philip Walton's "Solved by flexbox" which has a section on how it works.

I also wrote a blog post about how to adapt that one for IE10-11. (Sadly, flexbox is not supported in IE<10, but a sticky footer pattern is often mostly an aesthetic choice rather than a necessity, so you can cover most of your users.)

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)