How to stick footer to bottom (not fixed) even with scrolling

前端未结

关注

 9  1046

I\'m learning web development and I simply can\'t figure out what I\'m doing wrong on this. I want the footer of this page to stick to the bottom, below all content, but not fix

相关标签:

9条回答

逝去的感伤

2021-02-03 21:26

You may try this styling;

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
    padding-bottom: 100px;
}
header {
    position: absolute;
    float: top;
    width: 100%;
    height: 8%;
    background-color: #424242;
    color: #FFD740;
}
.title-div {
    position: absolute;
    height: 100%;
    margin: auto 5%;
    padding-right: 3%;
    border-right: solid 2px #FFD740;
}

header nav {
    position: absolute;
    width: 75%;
    left: 15%;
}

header ul {
    list-style: none outside none;
}

header ul  li{
    display: inline-block;
    margin: auto 2% auto 0; 
}
footer {
    height: 100px;
    padding-top: 15px;
    padding-left: 15px;
    color: #FFD740; 
    background-color: #424242;
}

Here is a demo

0 讨论(0)

囚心锁ツ

2021-02-03 21:26

Try this:

css:

#footer
{
    position: relative;
    background-size: cover;
    background-position: 50% 50%;
    background-color: #ffab62;
}

html:

<doctype HTML>
<HTML>
<head>
</head>
<body>
<div id = footer></div>
</body>
</HTML>

0 讨论(0)

谎友^

2021-02-03 21:27
I'm using bootstrap 4 and mdboostrap and I had the same problem.

the inline style worked for me:
```
<footer class="page-footer lighten-5" 
        style="position: relative; bottom:0; width: 100% !important;" >

....

</footer>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

上一页 1 2