Summary of solutions to Stricky footer

Source: Internet
Author: User
Stricky footer Design is one of the oldest and most common effects that we have experienced if the page content is not long enough, the footer block is pasted at the bottom, and if the content is long enough, the footer block is pushed down by the content. This article mainly and you introduce stricky footer three kinds of solutions to the relevant information, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

These days do vue+express practical practice, followed by Huang Yi teacher did know Stricky footer, on a serious understanding of learning, but the first two days of the problem, today, the details of several solutions are somewhat vague, so still recorded it! This is the way to study, constantly accumulating and repeating.

The bottom is used for the x Classic Stricky footer, which pushes down when the content of a single page is sufficient, and it is pinned to the bottom when the page content does not fill the entire screen.

And not like this:

Problem

If you have not known Stricky footer before, use fixed at the bottom, like this


Position:fixed;width:32px;height:32px;bottom:20px;left:calc (50%-16px); font-size:32px;

That x would overwrite the content, apparently not conforming to the requirements of the unrealistic, and unattractive.

So the classic Stricky footer is widely used, the application situation is also very much, the first few days to review the project of doing, found many places to apply.

Solution Solutions

Stricky footer There are three main solutions, we build a simple code


<body>  <p class= "content" ></p>  <p class= "Footer" ></p></body>

1. Add a minimum height for the content area

This method mainly uses the viewport vh to calculate the height of the overall window, and then subtracts the height of the bottom footer to derive the minimum height of the content area.


. content{  Min-height:calc (100VH-' height of footer ');  Box-sizing:border-box;}

This method is simple, but if the footer height of the page is different, each page must be recalculated, so it is not recommended

2. Using Flex layouts

The flex layout is now a world-wide place for mobile-side layouts.

We usually use the flex layout to split the window width, one side is fixed width, the other side is the adaptive width. Similarly, the flex layout can of course split the window height, footer Flex is 0, so flex gets its intrinsic height, and the content flex is 1. So it will be filled with the rest of the footer removed


body{  Display:flex;  Flex-flow:column;  MIN-HEIGHT:100VH;}. content{  flex:1;}. footer{  flex:0;}

This method is more recommended

3. Add a wrapper layer to the outside of the content

This method is also used by Huang Yi teachers to add a wrapper layer package outside the content


<body>  <p class= "Content-wrapper clearfix" >    <p class= "content" ></p>  </p >  <p class= "Footer" ></p></body>

To ensure compatibility, we usually add a Clearfix class on the wrapper layer,


html,body,.content-wrapper{  height:100%}body >. content-wrapper{  height:auto;  min-height:100%;}. content{  padding-bottom:150px//The same height as footer}.footer{  position:relative;  margin-top:-150px; -' footer height '  height:150px;  Clear:both;}. clearfix{  Display:inline-block;}. clearfix{  content: "";  Display:block;  height:0;  Clear:both;  Visibility:hidden;}

This completes the Stricky footer, this method is also recommended, but added a bit more code, and changed the HTML structure.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.