How to fix the footer at the bottom of the page (multiple methods)

As a front-end Web engineer, you must have encountered the following phenomenon when creating page effects: when an HTML page contains less content, the "footer" part of the Web page floats up and is located in the middle of the page, which has a great impact on the visual effect and makes your page look very ugly. Especially now that there are more and more wide screens, this phenomenon is even more common. So how do you fix the "footer" part of a web page to the bottom of the page forever? Please note that what is said here is that the footer is always fixed at the bottom of the page, not always fixed at the bottom of the display screen. In other words, when there is only a little content, the Web page is displayed at the bottom of the browser. When the content height exceeds the browser height, the footer part of the Web page is at the bottom of the page. In short, the footer part of the Web page is always at the bottom of the page. In other words, the Footer part always sinks to the bottom. As shown in the following figure:

So today we will mainly learn how to fix the footer at the bottom of the page?
Method 1 <br />First, let’s look at the first method, which comes from “How to keep footers at the bottom of the page” by Matthew James Taylor. Let’s take a look at the method introduced by Matthew James Taylor.
HTML Markup

Copy code

The code is as follows:

<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
Page content
</div>
<div id="footer">Footer Section</div>
</div>

In fact, we can add the required content structure in div#page as follows:

Copy code

The code is as follows:

<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left Sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
<div id="footer">Footer Section</div>
</div>

Actually, to make the footer always fixed at the bottom of the page, we only need four divs, where div#container is a container. In this container, we include div#header (header), div#page (page body, we can add more div structures in this div, as shown in the code above), div#footer (footer)

CSS Code

Copy code

The code is as follows:

html,body {
margin: 0;
padding:0;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*IE6 does not recognize min-height*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/*equal to the height of footer*/
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;/*foot height*/
background: #6cf;
clear:both;
}
/*=======Main content=======*/
#left {
width: 220px;
float: left;
margin-right: 20px;
background: lime;
}
#content {
background: orange;
float: left;
width: 480px;
margin-right: 20px;
}
#right{
background: green;
float: right;
width: 220px;
}

Let's take a look at the implementation principle of this method :
1. <html> and <body> tags: The height of the html and body tags must be set to "100%", so that we can set the percentage height on the container. At the same time, the margin and padding of html and body need to be removed, that is, the margin and padding of html and body are all 0;
2.div#container container: The div#container container must set a minimum height (min-height) of 100%; this is mainly to enable it to maintain 100% height when there is little (or no) content. However, min-height is not supported in IE6, so in order to be compatible with IE6, we need to do some compatibility processing on min-height. For details, you can see the previous code, or read Min-Height Fast Hack to learn how to solve the bug problem of min-height in IE6. In addition, we also need to set a "position:relative" in the div#container container so that the elements inside will not run away from the div#container container after absolute positioning;
3.div#page container: There is a critical setting for the div#page container. You need to set a padding-bottom value on this container, and this value must be equal to (or slightly greater than) the height of the footer div#footer. Of course, you can use border-bottom and border-width to replace padding-bottom in div#page, but there is one thing you need to pay attention to. You must not use margin-bottom to replace padding-bottom here, otherwise the effect will not be achieved.
4.div#footer container: The div#footer container must be set to a fixed height, the unit can be px (or em). div#footer also needs to be absolutely positioned and set to bottom:0; this will fix div#footer to the bottom of the div#container container. This will achieve the effect we mentioned earlier: when there is only a little content, div#footer is fixed to the bottom of the screen (because div#container sets a min-height:100%). When the content height exceeds the screen height, div#footer is also fixed to the bottom of div#container, that is, to the bottom of the page. You can also add a "width:100%" to div#footer to make it extend across the entire page;
5. Other divs: As for other containers, you can set them according to your needs, such as the previous div#header, div#left, div#content, div#right, etc.
advantage :
The structure is simple and clear. It does not require js or any hacks to achieve compatibility with all browsers and is also suitable for iPhone.
shortcoming :
The shortcoming is that you need to set a fixed height for the div#footer container. This height can be set according to your needs. The unit can be px or em. In addition, you need to set the padding-bottom (or border-bottom-width) of the div#page container to be equal to (or slightly larger than) the height of div#footer in order to run properly.
The above is how Matthew James Taylor introduced how to make the footer always fixed at the bottom of the page. If you are interested, you can read the original text or click here to view the Demo.
Method 2 :
This method uses the negative value of margin-top of the footer to achieve the effect that the footer is always fixed at the bottom of the page. Let's see how to achieve it in detail.
HTML Markup

Copy code

The code is as follows:

<div id="container">
<div id="page">Main Content</div>
</div>
<div id="footer">footer</div>

The above code is the most basic HTML Code. You can also find that div#footer and div#container are siblings, unlike method 1, where div#footer is inside div#container. Of course, you can also add content to the div#container container according to your needs, such as a three-column layout with a header part, see the following code:

Copy code

The code is as follows:

<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
</div>
<div id="footer">Footer section</div>

CSS Code

Copy code

The code is as follows:

html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
}
#page {
padding-bottom: 60px;/*The height is equal to the height of footer*/
}
#footer {
position: relative;
margin-top: -60px;/*equal to the height of footer*/
height: 60px;
clear:both;
background: #c6f;
}
/*===========Other divs===========*/
#header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: orange;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: yellow;
}

There are several points that are exactly the same between method 1 and method 2. For example, points 1-3 in method 1 are the same in method 2. In other words, method 2 also needs to set the height of html and body to 100%, and reset margin and padding to 0. Secondly, div#container also needs to set min-height: 100%, and handle the min-height compatibility issue under IE6. Thirdly, it is also necessary to set a padding-bottom or border-bottom-width value on the div#page container that is equal to the height of div#footer (or slightly larger). The difference between the two methods is :
1.div#footer is placed outside the div#container, which means that the two are at the same level. If you need to place a new element at the same level as the div#container, you need to absolutely position this element, otherwise it will destroy the min-height value of the div#container.
2. Set a negative value for margin-top of div#footer, and this value is equal to the height of div#footer, and it must also be equal to the padding-bottom (or border-bottom-width) value of the div#page container.
advantage:
The structure is simple and clear, and it can achieve compatibility with all browsers without js and any hacks.
shortcoming:
You need to set a fixed value for the footer, so you cannot make the footer part adapt to its height.
If you are interested in this method, you can also browse "CSS Sticky Footer" and "Pure Css Sticky Footer", or directly click Demo to view its source code.
Method 3 :
There are many ways to make the footer always fixed at the bottom of the page, but many of them require the use of some hacks or the help of javascript. Then the method three to be discussed next only uses 15 lines of style code and a simple and clear HTML structure to achieve the effect, and it has strong compatibility. Without saying anything else, let's take a look at the code first.
HTML Code

Copy code

The code is as follows:

<div id="container">
<div id="page">Your Website content here.</div>
<div class="push"></div>
</div>
<div id="footer">Footer Section</div>

The above is the most basic HTML Markup. You can also add new content, but one thing to note is that if you add content outside the div#container and div#footer containers, the newly added elements need to be absolutely positioned. For example, you can add the elements you need on your page to the div#container
HTML Code

Copy code

The code is as follows:

<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<div id="right">Right Content</div>
</div>
<div class="push"></div>
</div>
<div id="footer">Footer Section</div>

CSS Code

Copy code

The code is as follows:

html,
body{
height: 100%;
margin:0;
padding:0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;/*The negative value of margin-bottom is equal to the footer height*/
}
.push,
#footer {
height: 60px;
clear:both;
}
/*==========Other div effects==========*/
#header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: orange;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: yellow;
}
#footer {
background: #f6c;
}

Compared with the previous two methods, method three is more similar to method two. They both place div#footer outside the div#container, and this method adds a div.push in the div#container to push div#footer down. Let's take a look at how this method can achieve that the footer is always fixed at the bottom of the page.

1. <html> and <body> tags: The html and body tags are the same as the previous two methods. You need to set "height:100%" and reset "margin" and "padding" to 0;
2.div#container: The key part of method three lies in the setting of div#container. First, you need to set its minimum height (min-height) to 100%. In order to be compatible with IE6, min-height needs to be compatible (see the previous or code for specific processing methods). In addition, there is another key point here. You need to set a margin-bottom on the div#container container and give it a negative value. The value is equal to the height of div#footer and div.push. If div#footer and div.push have padding and border values set, then the negative value of margin-bottom of div#container needs to be added to the padding and border values of div#footer and div.push. That is to say "div#container{margin-bottom:-[div#footer's height+padding+border] or -[div.push's height+padding+border]}". In a nutshell: the negative value of margin-bottom of div#container needs to be consistent with the height of div#footer and div.push (if there is padding or border, the height value needs to be added to them);
3.div.push: We should not put any content in div.push, and this div must be placed in the div#container container, and at the bottom, and its height value needs to be set equal to the value of div#footer. It is best to add clear:both to clear the floating. The role of the div.push container here is to push the footer down.
4.div#footer container: The div#footer container is the same as method 2. It cannot be placed inside the div#container, but is at the same level as the div#container. If you need to set the spacing between the element and the footer, it is best to use padding instead of margin value.
advantage:
Simple and clear, easy to understand and compatible with all browsers.
shortcoming:
Compared with the previous two methods, this method uses an additional div.push container. This method also limits the height of the footer part and cannot achieve the adaptive height effect.
If you want to know more about method 3, you can click here or download the code directly from the DEMO and study it yourself.
Method 4 :
In the first three methods, we do not need any help from JavaScript or jQuery, which allows us to achieve the effect of always fixing the footer at the bottom of the page. Although the first three methods do not use the help of jQuery, we have added additional HTML tags to achieve the effect. If you omit these HTML tags, it will be difficult to achieve the effect. In this case, using jQuery or javascript to help achieve it is a good way. Let's take a look at the fourth method, which uses jQuery to achieve the effect of always fixing the footer at the bottom of the page.
HTML Markup

Copy code

The code is as follows:

<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<div id="right">Right Content</div>
</div>
<div id="footer">Footer Section</div>

We have not added any useless HTML tags here. You can also add content to the body at any time at this time, just make sure that div#footer is at the end of the body.

Copy code

The code is as follows:

<div id="footer">Footer Section</div>

CSS Code

Copy code

The code is as follows:

*{margin: 0;padding:0;}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1; /* IE <8 */
}
#footer{
height: 60px;
background: #fc6;
width: 100%;
}
/*===========Other divs===========*/
#header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: orange;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: yellow;
}

This method does not rely on CSS to achieve the effect like the previous three methods. Here you only need to write the style according to normal style requirements. However, one thing you need to pay special attention to is that you cannot set the height to 100% in html, body, otherwise this method will not work properly. If you set a height in div#footer and set the width to 100%, it will be foolproof.
jQuery Code

Copy code

The code is as follows:

Using the jQuery code above, we can easily achieve that the footer is always fixed at the bottom of the page. There are a few things to note when using this method.
1. Make sure that the jQuery version library is imported normally and the above jQuery code is called in normally;
2. Make sure <div id="footer"> is the last in body;
3. Make sure the height is not set to 100% in html, body.
advantage:
The structure is simple, no unnecessary tags are required, it is compatible with all browsers, and there is no need to write special styles. The footer does not have to have a fixed height.
shortcoming:
It cannot be displayed normally in browsers that do not support js, and it will flash every time the browser size is changed.
Today we mainly discussed and learned four methods to make the footer of a web page always fixed at the bottom of the page. It should be made clear here that the footer is always fixed at the bottom of the page, not at the bottom of the browser window. In other words, when the main content of the page is not as high as the display screen, the footer is fixed at the bottom of the display screen, but when the page content exceeds the height of the display screen, the footer will sink with the content, but the footer is always fixed at the bottom of the page. The first three are pure CSS implementations, and the last one is implemented using jQuery. Each of the four methods has its own advantages and disadvantages. You can decide according to your needs when using them. I hope this article can bring some help to everyone. If you have a better method, I hope you can share it with me. If you are willing, you can leave me a message directly. I will always be with you to learn and discuss this knowledge together.

<<: Detailed explanation of the basic use of Apache POI

>>: HTML uses the title attribute to display text when the mouse hovers