CSS makes the footer automatically stick to the bottom when the content height is not enough
|
In the UI cutting process, the page is often composed of three parts: header, content and footer. When the content of the page is not high enough to fill the screen, the footer will float up with the content. The small screen has limited height and no abnormality can be seen, but if it is a large screen, there will be a lot of blank space below the bottom, which greatly affects the appearance. Solution 1: Flex-Box The header uses position: sticky; to absorb the top, and then uses a box ( main ) to wrap the content ( container > content ) and the bottom ( footer ). The minimum height of this box is set to the remaining screen height excluding the header: min-height: calc(100vh - 50px); , and the box uses elastic layout ( flex: 1 1 auto; ) to make the content area automatically expand, while the bottom remains unchanged ( flex: 0 0 auto; ), so that the bottom automatically absorbs the bottom when there is not enough content, and automatically moves down when there is enough content. Example:
<html>
<head>
<title>CSS to achieve bottom (footer) - Solution 1: Flex-Box</title>
<style>
body {
margin: 0;
}
header {
height: 50px;
background: #20c997;
position: sticky;
top: 0;
}
main {
display: flex;
flex-flow: column nowrap;
min-height: calc(100vh - 50px);
}
.container {
flex: 1 1 auto;
}
.content {
background: #0d6efd;
}
footer {
flex: 0 0 auto;
background: #fd7e14;
}
</style>
</head>
<body>
<!--Header-->
<header>
header
</header>
<main>
<div class="container">
<!--Contents-->
<div class="content">
content
</div>
</div>
<!--Bottom-->
<footer>
footer
</footer>
</main>
</body>
</html>Online demo: https://codepen.io/mazeyqian/pen/rNeymdG Advantages: The bottom height can be expanded freely. Disadvantages: There are compatibility issues (Flex-Box & Calc) with older browsers. Solution 2: Negative margin at the bottom The content area is set to have a minimum height to fill the page, and a negative margin of equal height is set at the bottom. Example:
<html>
<head>
<title>CSS to achieve bottom (footer) - Solution 2: negative distance bottom `margin`</title>
<style>
body {
margin: 0;
}
header {
height: 50px;
background: #20c997;
position: sticky;
top: 0;
}
.container {
min-height: calc(100vh - 50px);
}
.content {
background: #0d6efd;
}
footer {
height: 50px;
margin-top: -50px;
background: #fd7e14;
}
</style>
</head>
<body>
<!--Header-->
<header>
header
</header>
<div class="container">
<!--Contents-->
<div class="content">
content
</div>
</div>
<!--Bottom-->
<footer>
footer
</footer>
</body>
</html>
Online demo: https://codepen.io/mazeyqian/pen/eYZvjzr This concludes this article about how to use CSS to automatically stick the footer to the bottom when the content height is not enough. For more information about how to automatically stick the footer to the bottom with CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
>>: Time zone issues with Django deployed in Docker container
Recommend
Detailed explanation of the difference between device-width and width in CSS3 media queries
1.device-width Definition: Defines the screen vis...
Why the explain command may modify MySQL data
If someone asked you whether running EXPLAIN on a...
The implementation process of Linux process network traffic statistics
Preface Linux has corresponding open source tools...
Detailed explanation of chmod command usage in Linux
chmod Command Syntax This is the correct syntax w...
JS ES new features template string
Table of contents 1. What is a template string? 2...
Basic principles of MySQL scalable design
Table of contents Preface 1. What is scalability?...
Example code for implementing timeline and animation effects using JavaScript (front-end componentization)
Table of contents Code cleaning "Frames"...
Pure CSS3 to achieve mouse over button animation Part 2
After the previous two chapters, do you have a ne...
Summary of pitfalls in virtualbox centos7 nat+host-only networking
Table of contents 1. Problem Background 2. What a...
The difference between storing full-width characters and half-width characters in MySQL
Unfortunately, the MYSQL_DATA_TRUNCATED error occ...
52 SQL statements to teach you performance optimization
1. To optimize the query, try to avoid full table...
Do you know how to use mock in vue project?
Table of contents first step: The second step is ...
20 Signposts on the Road to Becoming an Excellent UI (User Interface) Designer
Introduction: Interface designer Joshua Porter pub...
How to quickly repair corrupted MySQL database files using the myisamchk and mysqlcheck tools
Because the server's database hard disk space...
Detailed explanation of the process of querying user permissions using mysql statements
In MySQL, how do you view the permissions a user ...