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

前端未结

关注

 9  1044

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:01
This is what worked for me: When I tried bottom 0 and right 0, there was some annoying bottom margin below the footer which would not go away. I fixed it with top: 100% and position absolute:
```
body{
height: 100%;
width: 100%;
position: relative;

}

footer{
background-image: linear-gradient(to right, #c10f3f, #010168);
padding: 1em;
width: 100%;
top: 100%;
position: absolute;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

独厮守ぢ

2021-02-03 21:02

The accepted answer might be a bit outdated since we have Flexbox now. Give the container a min-height: 100vh and the footer a margin-top: auto so you don't have to deal with absolute positioning and fixed heights.

body {
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    background-color: #FFCCCC;
}

.content {
    background-color: #CCFFCC;
}

.footer {
    background-color: #CCCCFF;
    margin-top: auto;
}

<div class="container">
    <div class="header">header</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
</div>

0 讨论(0)

清歌不尽

2021-02-03 21:11

Your first mistakes are just using absolute position on everything and min-height on many stuff you don't need.

For starter just remove all absolute stuff and put min-height only in div named "body" after that footer will be glued to the #body by default, after that your footer won't be flying around where ever it wants.

Best way to use absolute in divs is: - when you already have existing div with relative position, and then you put another div with an absolute position inside of a div with a relative position.

Also, play only with pixel values if you start going with % you will get lost like you already did.

0 讨论(0)
发布评论:

提交评论
- 加载中...
野趣味

2021-02-03 21:12
the answer posted by @divy3993 works but sometimes making footer absolute keeps it stranded on the middle of the page. Atleast that's what had happened to me. So I made a small change, I'll post it below
```
#footer {
  background: #ffab62;
  width: 100%;
  height: 100px;
  position: relative; //make relative instead of absolute
  bottom: 0;
  left: 0;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

执念已碎

2021-02-03 21:22

I'm using Bootstrap 4 and this worked for me: https://www.youtube.com/watch?v=yc2olxLgKLk

I did this way in the CSS file (base.css):

    html {
        height: 100%;
    }

    body {
        min-height: 100%;

        display: flex;
        flex-direction: column;
    }

    footer{
        padding: 3em;
        margin-top: auto;
    }

And I've linked the css file in the html (base.html):

<head>
    <link rel="stylesheet" type="text/css" href="'<path to css>'"/>
</head>

0 讨论(0)

清酒与你

2021-02-03 21:25

I think this might help you.

Just showing you the way how to achieve what you want.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
#header {
  background: #ededed;
  padding: 10px;
}
#content {
  padding-bottom: 100px;
  /* Height of the footer element */
}
#footer {
  background: #ffab62;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
}

<div id="wrapper">

  <div id="header">
  </div>
  <!-- #header -->

  <div id="content">
  </div>
  <!-- #content -->

  <div id="footer">
  </div>
  <!-- #footer -->

</div>
<!-- #wrapper -->

Make sure the value for 'padding-bottom' on #content is equal to or greater than the height of #footer.

Update:

JSFiddle Demo to play around.

0 讨论(0)

1 2 下一页