CSS Sticky Footer Implementation Code
|
This article introduces the CSS Sticky Footer implementation code and shares it with you. The details are as follows:
The effect shown in the figure above is the sticky footer. When the page content is not long enough, the footer is positioned at the bottom of the window. When the page content exceeds the window, the footer is displayed at the bottom of the page. Here are several implementation solutions: 1. FlexBox Layout The HTML structure is as follows:
<body>
<div class="header">Sticky Footer</div>
<div class="content">
<p>Test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>Test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>Test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>Test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>Test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>Test test test test test test test test test test test test test test test test test test test test test test test</p>
</div>
<div class="footer">
<p>This is footer</p>
</div>
</body>The main CSS is as follows:
body{
display: flex;
flex-flow: column;
min-height: 100vh;
}
.content{
flex: 1;
}FlexBox is so simple to implement, the effect is also posted
The effect of the map doesn’t seem to be very good, but the effect is achieved! ! ! ! 2. Classic routine: padding-bottom + margin-top The HTML structure is as follows:
<body>
<div class="wrapper clearfix">
<div class="title">Sticky Footer</div>
<div class="content">
<p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>
</div>
</div>
<div class="footer">
<p>This is footer</p>
</div>
</body>The main CSS is as follows:
.wrapper{
min-height: 100vh;
}
.content{
padding-bottom: 50px;
}
.footer{
height: 50px;
margin-top: -50px;
}Implementation effect (I feel like I need to install a screen recording software):
Keep the following in mind when using this solution: 1. The minimum height of the wrapper must be equal to the window height 2. The absolute values of the three property values of content's padding-bottom, footer's margin-top and height must be consistent (because margin-top is a negative value, so it is an absolute value); the reason for keeping consistency is to better implement the sticky footer. Although the sticky footer effect can be achieved if the height is relatively small, there will be a gap at the bottom. 3. This solution has good compatibility with all major browsers. Emmmmm, not bad 4. When the main body uses a floating layout, you need to consider a compatibility issue. The focus here is on Google Chrome. The fourth compatibility solution mentioned above: Add the famous clearfix hack to .wrapper:
.clearfix{
display: inline-block
}
.clearfix:after{
display: block
content: "."
height: 0
line-height: 0
clear: both
visibility: hidden
}3. Fixed height solution The HTML structure is as follows:
<body>
<div class="wrapper">
<div class="header">Sticky Footer</div>
<div class="content">
<p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>
</div>
</div>
<div class="footer">
<p>This is footer</p>
</div>
</body>The main CSS styles are as follows:
.wrapper{
min-height: calc(100vh - 50px);
box-sizing: border-box;
}Note: 50px is the height of the footer. A space needs to be left before and after the calc() operator. I won’t post the results, you can just use your imagination, they are pretty much the same as above. . . The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Some points on using standard HTML codes in web page creation
Recommend
Solution to the long delay of MySQL database master-slave replication
Preface The delay of MySQL master-slave replicati...
Detailed explanation of filters and directives in Vue
Table of contents vue custom directive Global Dir...
Apache ab concurrent load stress test implementation method
ab command principle Apache's ab command simu...
Commonly used js function methods in the front end
Table of contents 1. Email 2. Mobile phone number...
MySQL 8.0 Window Function Introduction and Summary
Preface Before MySQL 8.0, it was quite painful to...
Detailed analysis of MySQL master-slave delay phenomenon and principle
1. Phenomenon In the early morning, an index was ...
Detailed explanation of MySQL execution plan
The EXPLAIN statement provides information about ...
Detailed tutorial on OpenStack environment deployment based on CentOS (OpenStack installation)
Effect display: Environment preparation controlle...
Initial settings after installing Ubuntu 16 in the development environment
The office needs Ubuntu system as the Linux devel...
Differences between Windows Server 2008R2, 2012, 2016, and 2019
Table of contents Common version introduction Com...
Two query methods when the MySQL query field type is json
The table structure is as follows: id varchar(32)...
A brief analysis of the basic implementation of Vue detection data changes
Table of contents 1. Object change detection 2. Q...
JS addEventListener() and attachEvent() methods implement registration events
In JavaScript's DOM event model, events are r...
How to apply TypeScript classes in Vue projects
Table of contents 1. Introduction 2. Use 1. @Comp...
Detailed explanation of how to clear a few pixels of blank space under an image using CSS
Recently, a friend asked me a question: When layo...