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
Detailed usage of Vue more filter widget
This article example shares the implementation me...
Implementation of MySQL Multi-version Concurrency Control MVCC
Table of contents What is MVCC MVCC Implementatio...
Complete steps to install Anaconda3 in Ubuntu environment
Table of contents Introduction to Anaconda 1. Dow...
CSS Paint API: A CSS-like Drawing Board
1. Use Canvas images as CSS background images The...
Implementation steps for installing Redis container in Docker
Table of contents Install Redis on Docker 1. Find...
A brief discussion on how Tomcat breaks the parent delegation mechanism
Table of contents JVM Class Loader Tomcat class l...
Solution to large line spacing (5 pixels more in IE)
Copy code The code is as follows: li {width:300px...
Vue recursively implements custom tree components
This article shares the specific code of Vue recu...
Detailed explanation of software configuration using docker-compose in linux
Preface This article will share some docker-compo...
Batch replace part of the data of a field in Mysql (recommended)
Batch replace part of the data of a field in MYSQ...
JavaScript implements draggable progress bar
This article shares the specific code of JavaScri...
Vuex combines session storage data to solve the problem of data loss when refreshing the page
Table of contents Preface 1. Reasons: 2. Solution...
Using JS timer to move elements
Use JS timer to make an element to make a method ...
How to understand semantic HTML structure
I believe everyone knows HTML and CSS, knows the ...
Zen coding for editplus example code description
For example, he enters: XML/HTML Code div#page>...