Bootstrap footer at the bottom of the page

前端未结

关注

 4  1175

I have read a lot of posts about this but I still didn\'t find an answer. I have a footer that I want to be at the end of the page, not fixed. The problem is th

相关标签:

4条回答

礼貌的吻别

2021-01-31 04:15

Use this stylesheet:

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

0 讨论(0)

佛祖请我去吃肉

2021-01-31 04:25

You can just add style="min-height:100vh" to your page content conteiner and place footer in another conteiner

0 讨论(0)
发布评论:

提交评论
- 加载中...
眼角桃花

2021-01-31 04:28
When using bootstrap 4 or 5, flexbox could be used to achieve desired effect:
```
<body class="d-flex flex-column min-vh-100">
    <header>HEADER</header>
    <content>CONTENT</content>
    <footer class="mt-auto"></footer>
</body>
```
Please check the examples: Bootstrap 4 Bootstrap 5

In bootstrap 3 and without use of bootstrap. The simplest and cross browser solution for this problem is to set a minimal height for body object. And then set absolute position for the footer with bottom: 0 rule.
```
body {
  min-height: 100vh;
  position: relative;
  margin: 0;
  padding-bottom: 100px; //height of the footer
  box-sizing: border-box;
}

footer {
  position: absolute;
  bottom: 0;
  height: 100px;
}
```
Please check this example: Bootstrap 3
0 讨论(0)
发布评论:

提交评论
- 加载中...

猫巷女王i

2021-01-31 04:32

In my case for Bootstrap4:

<body class="d-flex flex-column min-vh-100">
    <div class="wrapper flex-grow-1"></div>
    <footer></footer>
</body>

0 讨论(0)