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

Sample code for implementing the Olympic rings with pure HTML+CSS

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

Sample code for implementing the Olympic rings with pure HTML+CSS

Detailed explanation of browser negotiation cache process based on nginx

Detailed explanation of Nginx access restriction configuration

Linux system dual network card binding configuration implementation

Practical Optimization of MySQL Paging Limit

The table merges cells and the img image to fill the entire td HTML

An article to help you understand Js inheritance and prototype chain

nginx+tomcat example of accessing the project through the domain name

In-depth analysis of the role of HTML  comment tags

How to uninstall MySQL 5.7.19 under Linux

Recommend

Implementation steps for building FastDFS file server in Linux

An example of dynamically implementing different styles of data in a column of el-table of element ui

Summary of XHTML application in web design study

MySQL stored procedures and common function code analysis

Disabled values that cannot be entered cannot be passed to the action layer

Detailed explanation of binary and varbinary data types in MySQL

Detailed steps to install the specified version of docker (1.12.6) using rpm

The best solution for resetting the root password of MySQL 8.0.23

How to use async and await in JS

How to use Docker+DockerCompose to encapsulate web applications

Web page image optimization tools and usage tips sharing

Implementation example of specifying container ip when creating a container in docker

Detailed steps for building a React application with a Rails API

The ultimate solution to the problem of Chinese garbled characters in tomcat static pages (html)

Mysql uses insert to insert multiple records to add data in batches