CSS Footer on Bottom of Page [duplicate]

2019-04-17 05:19发布

站内文章 / HTML/CSS
51 0 0

问题:

This question already has an answer here:

  • Position footer at bottom of page having fixed header 6 answers

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.

回答1:

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.)



回答2:

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



回答3:

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

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


回答4:

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


回答5:

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


回答6:

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.



标签： html css css-position absolute relative
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~