A simple way to put HTML footer at the bottom of the page

Requirement: Sometimes, when the page content is short and cannot support the browser height, but you want the footer to be at the bottom of the window.

Idea: The minimum height of the footer's parent layer is 100%. The footer is set to be absolutely (absolute) bottom (bottom: 0) relative to the parent layer, and the height of the footer must be reserved in the parent layer.

HTML code:

XML/HTML CodeCopy content to clipboard

< div id = "wapper" >
< div id = "main-content" >
</ div >
< div id = "footer" >
</ div >
</ div >

The CSS is as follows:

CSS CodeCopy content to clipboard

#wapper {
position : relative ; /*Important! Ensure that the footer is absolutely relative to the wapper position */
height : auto ; /* Ensure that the page can be displayed normally when the browser height is expanded*/
min-height : 100% /* IE6 does not support it, IE6 needs to be configured separately*/
}
#footer {
position : absolute ; bottom : 0; /* Key */
left :0; /* Be sure to remember this in IE */
height : 60px ; /* The height of the footer must be a fixed value*/
}
#main - content {
padding-bottom : 60px ; /*Important! Space reserved for footer*/
}

At this point, other browsers can display it normally, but IE 6 needs to handle it separately:

CSS CodeCopy content to clipboard

<!--[if IE 6]->
<style>
#wapper { height :100%;} /* IE will automatically expand the layer when the height is not enough*/
</style>
<![endif]-->

The above simple implementation method of placing the HTML footer at the bottom of the page is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

<<: The new version of Chrome browser settings allows cross-domain implementation

>>: Detailed explanation of the core concepts and basic usage of Vuex

MySQL online log library migration example

A simple way to put HTML footer at the bottom of the page

MySQL online log library migration example

mysql5.7.18.zip Installation-free version configuration tutorial (windows)

How to use MyCat to implement MySQL master-slave read-write separation in Linux

Detailed explanation of CSS text decoration text-decoration & text-emphasis

Detailed explanation of the English names corresponding to the font-family of Chinese fonts in CSS styles

Detailed explanation of Linux text processing command sort

Detailed explanation of putting common nginx commands into shell scripts

How to let DOSBox automatically execute commands after startup

The ultimate solution for playing background music in Firefox browser (Chrome multi-browser compatible)

Set the default text of the search box. The default text disappears when the mouse is clicked.

Recommend

Analysis and solution of the reason why the frameset tag in HTML cannot be displayed normally

CentOS7 64-bit installation mysql graphic tutorial

Solve the problem that the default value of CSS3 transition-delay attribute is 0 without unit and it is invalid

Analysis of the difference between emits and attrs in Vue3

A brief introduction to the simple use of CentOS7 firewall and open ports

Mysql anonymous login cannot create a database problem solution

Commonly used js function methods in the front end

Implementation of Nginx forwarding matching rules

Gearman + MySQL to achieve persistence operation example

Vuex combines session storage data to solve the problem of data loss when refreshing the page

Mysql5.7.17 winx64.zip decompression version installation and configuration graphic tutorial

Vue realizes screen adaptation of large screen pages

Detailed explanation of Docker daemon security configuration items

Native js implements a minesweeper game with custom difficulty

Vue+Echart bar chart realizes epidemic data statistics