Detailed explanation of three solutions to the website footer sinking effect
|
Background Many website designs generally consist of two parts: content + footer. The content contains the main content of the website, and the footer displays the website's registration information, etc. Due to the uncertainty of the website's content height, the following two situations may occur: 1. When there is less content, the footer is fixed at the bottom of the page. As shown below:
2. When the content is long, the footer slides behind the content, as shown in the red box in the following figure:
This requirement is still very common on the PC side. I also encountered this problem in my own application. Today I summarized several methods to achieve this layout. Method 1: Use js to calculate Why did I use js control first? To be honest, when I first encountered this problem, I directly used js to solve it (mainly because I knew js could definitely achieve it, so I didn’t spend time thinking of other methods) The main idea is: after the page is loaded, calculate the screen height - the actual height of the content. If the difference is greater than To determine the height of the footer, add a fixed position to the footer style to fix it at the bottom of the screen. The demo code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>footer bottom effect</title>
<style type="text/css">
div {
margin: 0,
padding: 0;
box-sizing: border-box;
position: relative;
}
html, body {
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
}
#content {
background: blue;
}
#footer {
width: 100%;
height: 100px;
background: red;
}
.footer-fixed {
position: fixed;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="content"> content </div>
<div id="footer">
footer
</div>
</div>
<script type="text/javascript">
let height = document.getElementById('container').clientHeight - document.getElementById('content').clientHeight;
// Here we add another class to the footer to make it fixed if (height > 100) document.getElementById('footer').classList.add('footer-fixed');
</script>
</body>
</html>Based on the principle of never using js if CSS can solve the problem, although this method is the easiest to think of, it is still not recommended. Moreover, this CSS code needs to obtain the clientHeight, which will cause the page to be reflowed and redrawn. From a performance perspective, it is not recommended. Method 2: Use flex layout + min-height justify-content: space-between in flex layout; with the super useful min-height, it can just meet the effect of sinking the footer when the content is insufficient The demo code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>footer bottom effect</title>
<style type="text/css">
div {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
// Key code // Although the height of the container is unknown, a minimum height can be set, which is beneficial to the layout min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#content {
background: blue;
}
#footer {
width: 100%;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>Min-height is really a very useful CSS attribute. It can easily achieve the bottoming effect when combined with flex. Method 3: Use flex + margin-top This trick was learned when talking about the wonderful uses of margin auto. In the flex formatting context, margin auto will automatically distribute the remaining space. Here we can use margin-top:auto on the footer to achieve the bottoming effect.
<!DOCTYPE html>
<html>
<head>
<title>footer bottom effect</title>
<style type="text/css">
div {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
#content {
background: blue;
}
#footer {
width: 100%;
height: 100px;
background: red;
margin-top: auto; // key code}
</style>
</head>
<body>
<div id="container">
<div id="content">
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>Summary: The above three methods have no side effects. In fact, there are other ways to achieve this sinking effect, but they will affect other layouts. I will not go into details here. I will update it later when there is a better solution. |
<<: Let's talk in detail about the props attributes of components in Vue
>>: Display ellipsis effect when table cell content exceeds (implementation code)
Recommend
How to reset the root password in Linux mysql-5.6
1. Check whether the MySQL service is started. If...
Today I will share some rare but useful JS techniques
1. Back button Use history.back() to create a bro...
How to change the root password in MySQL 5.7
Starting from MySQL 5.7, many security updates ha...
Process analysis of deploying ASP.NET Core applications on Linux system Docker
Table of contents 1. System environment 2. Operat...
Vue element implements table adding, deleting and modifying data
This article shares the specific code of vue elem...
I have compiled a few cool design sites that I think are good.
You must have inspiration to design a website. Goo...
Installation tutorial of mysql 8.0.11 compressed version under win10
This article shares the installation tutorial of ...
Nginx tp3.2.3 404 problem solution
Recently I changed Apache to nginx. When I moved ...
MySQL sorting by conventional sorting, custom sorting, and sorting by Chinese pinyin letters
MySQL regular sorting, custom sorting, and sortin...
How to write a picture as a background and a link (background picture plus link)
The picture is used as the background and the lin...
The whole process of developing a Google plug-in with vue+element
Simple function: Click the plug-in icon in the up...
Interviewers often ask questions about React's life cycle
React Lifecycle Two pictures to help you understa...
Sample code for implementing water drop ripple animation button effect with CSS+JS
The code looks like this: <!DOCTYPE html> &...
How to install and configure MySQL and change the root password
1. Installation apt-get install mysql-server requ...
Issues with locking in MySQL
Lock classification: From the granularity of data...