The so-called "Sticky Footer", is not a new front-end concept and technology, it refers to a Web page effect: If the page content is not long enough, the footer is fixed at the bottom of the browser window, if the content is long enough, the footer is fixed at the bottom of the page. However, if the content of the page is not long enough, the bottom footer will remain in the browser window.
Realize
Method
1. Set the bottom margin of the content section to negative
This is a more mainstream use, the content part of the minimum height of 100%, and then use the content part of the negative bottom margin value to achieve when the height of dissatisfaction, the footer remains at the bottom of the window, when the height of the effect of the introduction.
<body> <p class= "wrapper" > content <p class= "Push" ></p> </p> <footer class= "Footer" ></footer></body>html, body { height:100%; margin:0;}. wrapper { min-height:100%; /* equals the height of footer * /margin-bottom: -50px;}. Footer,.push { height:50px;}This method requires additional placeholder elements (such as. push) in the container.
It is important to note that the. Wrapper's Margin-bottom value needs to be consistent with the negative height value of. Footer, which is not very friendly.
2. Set the top margin of the footer to a negative number
If you can use a negative margin bottom on a container, can you use a negative margin top? Of course.
Increases the parent element outside of the content and makes the bottom padding of the content part equal to the value of the footer height.
<body> <p class= "Content" > <p class= "content-inside" > content </p> </p> <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 approach, like the previous one, requires additional HTML elements to be added unnecessarily.
3. Using the Flexbox flexible box layout
The footer height of the above three methods is fixed, which is usually not conducive to the layout of the Web page: The content will change, they are elastic, once the content beyond a fixed height will break the layout. So give footer to use Flexbox bar, let its height can become big and small change Beautiful ~ (≧∇≦)
<body> <p class= "Content" > content </p> <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 add more elements below. You can choose from one of the following techniques:
Flex:1 allows content (e.g.. Content) to be highly scalable
Margin-top:auto
Remember, we have the Flexbox Complete guide (English).
4. Absolute
Absolute location processing should be a common scenario, as long as the footer is positioned in the primary container reserved placeholder position.
<p class= "wrapper" > <p class= "content" ><!--page body content area--></p> <p class= "Footer" ><!--need to do Sticky Footer effect of the footer--></p></p>html, body { height:100%;}. wrapper { position:relative; min-height:100%; padding-bottom:50px; Box-sizing:border-box;}. footer { Position:absolute; bottom:0; height:50px;}This scheme specifies the height of the HTML, body 100%, and the padding-bottom of the content needs to be consistent with the height of the footer.
5. Calc
The Calculation Function Calc Calculation (window height-footer height) gives the content area a minimum height without any additional style processing, the least amount of code and the simplest.
<p class= "wrapper" > <p class= "content" ><!--page body content area--></p> <p class= "Footer" ><!--need to do Sticky Footer effect of the footer--></p></p>.content { min-height:calc (100vh-50px);}. footer { height:50px;}This is an ideal implementation if you do not need to consider the compatibility of Calc () and VH units. The same problem is that footer's height value needs to be consistent with the calculated values in the content.
6. Table
Use the Table property to make the page appear in tabular form.
<p class= "wrapper" > <p class= "content" ><!--page body content area--></p> <p class= "Footer" ><!--need to do Sticky Footer effect of the footer--></p></p>html, body { height:100%;}. wrapper { display:table; width:100%; min-height:100%;}. Content { Display:table-row; height:100%;}It is important to note that there is a more common style limit for using the table scheme, and often attributes such as margin, padding, border, and so on are not expected. The author does not recommend using this scheme. Of course, the problem can be solved: don't write other styles on the table.
7. Using the grid grid layout
Grid is a lot more new than Flexbox, and it's better and more concise, and we also have the Grid Complete guide (UK).
<body> <p class= "Content" > content </p> <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, Grid layout currently supports only Chrome Canary and Firefox Developer edition versions.
Summarize
The above several realization scheme, the author has tried in the project, each realization method actually is similar, simultaneously also has own advantage and disadvantage. Some of these schemes have restrictive problems and require a fixed footer height, and some of them need to add additional elements or require Hack means. Students can choose the most suitable solution according to the specific needs of the page.
Of course, technology is constantly updated, and perhaps there are many different, better solutions. But I believe that the final goal is the same, in order to better user experience!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
