Footer bottom set (Sticky footer) is to make the footer section of the page is always at the bottom of the browser window. When the page content beyond the browser suffice as long as the visual height, footer with content pushed to the bottom of the page; but if the Web content is not long enough, the end of the footer setting will remain at the bottom of the browser window.
1, the bottom part of the contents from the outside to negative
This is a more mainstream usage, the content portion of the minimum height to 100% recycled content outside negative bottom portion from the value achieved when highly dissatisfied footer remain at the bottom of the window, when the height exceeds the subsequent launch of the effect .
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>专门建立的学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①② ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* 等于footer的高度 */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
This method requires additional container sited elements (such as .push)
Note that the margin-bottom value .wrapper needs and negative height value .footer consistent, which is not very friendly.
2, the top footer from outside to negative
Since it can use a negative margin bottom on the container, you can use a negative margin top it? of course can.
To increase the foreign content of the parent element, and so that the height of the value of the margin and the footer content in the bottom part of the same.
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body>html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
However, this method together with one, like, need to add extra unnecessary html element.
3, using Calc () of setting the height
One method does not require any extra element - using CSS3 new calculation function Calc ()
Thus there will be no overlap between the element occurs, no need to control the inner and outer margins ~
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
You may be wondering contents height calc () Why minus 70px, 50px footer rather than height, because the assumption that there are two elements spacing 20px, so 70px = 50px + 20px
However, you do not have to care about these -
4, the flexible pouch layout using flexbox
footer height above three methods are fixed, generally speaking it is not conducive to the page layout: content will change, they are resilient, once the content exceeds a fixed height would damage the layout. So give footer flexbox use it, it can be turned into small height become beautiful ~ (≧ ∇ ≦)
专门建立的学习Q-q-u-n：⑦⑧④-⑦⑧③-零①② ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
You can also add a header above or below to add more elements. You can select one of the following techniques:
flex: 1 so that contents (e.g.: .content) height free expansion
margin-top: auto
5, using the grid layout Grid
grid than flexbox but also a lot of new, better and very concise
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}
Unfortunately, the grid layout (Grid layout) currently only supports Chrome Canary and Firefox Developer Edition version.
to sum up
In fact, the end of the set layout footer everywhere, a lot of people like me feel it is rather simple, but then could only know nothing, happened to see the end of the introductory essay footer set feel good, then the translation of the CSS-TRICKS.