Position footer at the bottom

前端未结

关注

 6  951

抹茶落季

I would like to position the footer at the bottom of the page.

For example on the page where there\'s not much content, I still need the footer at the bottom, but if

相关标签:

6条回答

梦毁少年i

2021-01-14 17:36

Apply the technique described in this post: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page.

I found myself facing the same situation, and i think this is the most comprehensively described method for using sticky footer.

0 讨论(0)
发布评论:

提交评论
- 加载中...

不思量自难忘°

2021-01-14 17:37

All previous CSS solutions requite footer height to be constant. For all proper browsers, the following solution solves the problem for dynamically changing footer height.

html { height: 100%; }

body {
    margin        : 0;
    min-height    : 100%;
    display       : flex;
    flex-direction: column;
}

body > .content { flex-grow:   1; background: ghostwhite; }
body >  footer  { flex-shrink: 1; background: gold; }

<div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis luctus mauris nec lacinia. Maecenas egestas, nisl sed volutpat consectetur, urna orci bibendum lorem, sit amet maximus dolor massa et mi. Duis elit neque, interdum nec euismod sed, interdum ac dui. Maecenas non ornare nibh. Vestibulum malesuada et sem quis mattis. Phasellus a justo non dolor porta faucibus sed id lectus. Nullam imperdiet, velit eu convallis ornare, ipsum augue vestibulum lectus, finibus bibendum nulla libero a augue. Aenean eleifend sapien eu placerat facilisis. Vestibulum pulvinar pretium neque, in ullamcorper orci semper nec. Donec rhoncus velit magna, eget dapibus augue cursus quis. Proin in nisi ut tortor finibus tristique vitae vel libero. Aliquam placerat diam nec consectetur tristique. Praesent bibendum diam id velit pellentesque facilisis. In quis odio nec tortor cursus commodo in eu nisl. Nullam non interdum enim, a faucibus metus. Mauris posuere erat id vestibulum eleifend.  </div>
<footer> {{ footer }} </footer>

0 讨论(0)

清酒与你

2021-01-14 17:40

This can be done using CSS.

1) setup a footer in your HTML

<body>
  ...
  <div id="footer">...</div>
</body>

2) Use CSS positioning to place it at the bottom.

html {
  padding-bottom:50px;
  position:relative;
}

body {
  position:relative;
  min-height:100%;
}

#footer {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:50px;
}

0 讨论(0)

青春惊慌失措

2021-01-14 17:41
This can be done using only CSS.

Here is the main part of a HTML file which contains nav, main and footer.
```
...
<nav class="nav"> ... </nav>
<main class="main"> ... </main>
<footer class="footer"> ... </footer>
...
```
In your CSS add the following lines
```
...
.main {
    ...
    min-height: calc(100vh - <height of your footer>)
}
...
```
Now, if there is no content within main the min-height will make sure to make the main take the whole viewport and if there are any contents in the main, the min-height does not matter.
0 讨论(0)
发布评论:

提交评论
- 加载中...
隐瞒了意图╮

2021-01-14 17:46

You should use one of the sticky footer techniques

0 讨论(0)
发布评论:

提交评论
- 加载中...

萌比男神i

2021-01-14 17:49

Make a another div above your footer like this and add clear both to it and it will push your footer:

<style type="text/css">
.push{
clear:both;
height:5px;
width:5px;
display:block;
position:relative;
margin:0 auto;
}
</style>

  //HTML CODE
  <div class="push"></div>     
  <div class="fotter">
  </div>

0 讨论(0)