Make div stick to bottom of page

后端未结

关注

 4  1058

So I made a contact page and I want the footer div to be sticking to the bottom of the page not right after the contact form.

But if I put everything to

相关标签:

4条回答

梦毁少年i

2020-12-18 20:51

You can do that easily with the display: flex. You don't care about height body or wrapper tag.

Example: Please change the height of main tag any value if you want, footer always sticky to bottom(not position: fixed).

https://codepen.io/tronghiep92/pen/dzwRrO

HTML markup

<div id="wrapper">
   <header>my header</header>
   <main>main content, please change height</main>
  <footer>
    my footer
  </footer>
</div>

CSS Solution

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
  margin-top: auto; /* this is the solution */
}

main {
  height: 100px
}

Or you can:

#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
}

main {
  flex: 1;
  height: 100px;
}

0 讨论(0)

刺人心

2020-12-18 20:53
You can probably use position: fixed to achieve this.
```
.footer {
  position: fixed;
  bottom: 0;
}
```
With this you will need to offset the bottom of the page so would suggest adding a padding-bottom to .main that is the height of the footer.
```
.main {
  padding-bottom: 30px /*whatever the height of your footer is*/
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

予麋鹿

2020-12-18 21:00

If you need sticky footer you can make it with 2 solutions.

Solution 1:

HTML:

<div class="wrap">
    Content
</div>
<div class="footer">
    Sticky Footer
</div>

CSS:

body, html, .wrap{
  height:100%;
}

body > .wrap{
  height:auto;
  min-height:100%;
}

.wrap:after {
  content: "";
  display: block;
  height: 100px; 
}

.footer{
  background:#662e8c;
  margin-top:-100px;
  height:100px;
  color:#fff;
  position:relative;
  line-height:180%;
  padding:0 10px;
}

Example: https://jsfiddle.net/ta1amejn/

Solution 2 (With table properties):

HTML: Content Footer

CSS:

body{
    display:table;
    width: 100%;
}

html, body{
    height:100%;
}

.main{
    height:100%;
    width:100%;
    padding-bottom:20px;
    background:#eee;
    display:table-row;
}

.footer{
    /*height:30px;*/
    line-height:30px;
    width:100%;
    background:#00f0ad;
    display:table-row;
}

Example: https://jsfiddle.net/zbtaoq1b/

If you want a fixed footer use this solution:

.footer{
    position: fixed;
    bottom: 0;
}

0 讨论(0)

一生所求

2020-12-18 21:07
Pritesh Gupta's solution works really well for me:

I'm copy+pasting the code in case their site goes down:

Here's the HTML:
```
<!DOCTYPE html>
<html>
  <head>
    <title>Sticky Footer</title>
  </head>

  <body>
    <main>stuff</main>
    <footer>&copy; 2016</footer>
  </body>
</html>
```
Here's the CSS:
```
body {
  margin: 0;
}

main {
  min-height: calc(100vh - 4rem);
}

footer {
  height: 4rem;
}
```
I don't know if it works in old browsers but I'm not so worried about that myself.

It also depends on you knowing the height of your footer, although it's worth pointing out that you don't necessarily have to set the height manually like in the code above since you can always figure out what it is if you know how much vertical padding and line-height the contents have...

Hope this helps, I spent most of the morning trying every single sticky footer tutorial on the web before stumbling across this technique and whilst other techniques do work this one requires minimal effort.
0 讨论(0)
发布评论:

提交评论
- 加载中...