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.
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
