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

How to configure pseudo-static and client-adaptive Nginx

A brief discussion on the problem that the text in the button is not centered vertically in the browser's compatibility mode

XML/HTML CodeCopy content to clipboard < butto...

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

How to configure pseudo-static and client-adaptive Nginx

Explain MySQL's binlog log and how to use binlog log to recover data

Detailed graphic tutorial on silent installation of oracle12.2 on CentOS under VMware

How to migrate local mysql to server database

Detailed tutorial on installing ElasticSearch 6.x in docker

Implementation idea of left alignment of the last row of flex box layout

MySQL select results to perform update example tutorial

MySQL quick recovery solution based on time point

Summary of four situations of joint query between two tables in Mysql

Detailed explanation of how to use Docker-Compose commands

Recommend

MySQL 8.0.15 version installation tutorial connect to Navicat.list

Quick understanding and example application of Vuex state machine

How to implement Nginx reverse proxy and load balancing (based on Linux)

How to create, save, and load Docker images

How to install MySQL 8.0 database on M1 chip (picture and text)

View the dependent libraries of so or executable programs under linux

How to use stored procedures in MySQL to quickly generate 1 million records

Linux unlink function and how to delete files

A brief discussion on the problem that the text in the button is not centered vertically in the browser's compatibility mode

A Brief Analysis of MySQL - MVCC

Detailed installation tutorial of zabbix 4.04 (based on CentOS 7.6)

Example of converting timestamp to Date in MySQL

MySQL implements multi-table association statistics (subquery statistics) example

Solution for Docker Swarm external verification load balancing not taking effect

Dynamically add tables in HTML_PowerNode Java Academy