How to implement sticky footer with html

This article will introduce in detail for you "html how to achieve sticky footer", the contents of the steps are clear and detailed, the details are handled properly, and the editor will update different knowledge points every day, hope that this "html how to achieve sticky footer" can give you unexpected harvest, please follow the editor's ideas slowly in depth, the specific contents are as follows, to harvest new knowledge.

Online method

1. Html tag

Fill up the html display height (class= "hmur100").

2. Body tag

Set the body elastic layout and fill the height (class= "d-flex flex-column hmer100").

3. Main tag

Set main to different screen devices without setting contraction (role= "main" class= "flex-shrink-0").

Elastic shrinkage rules:

Flex-shrink-0 different screen devices do not set shrink

Flex-shrink-1 different screen device settings shrink

4. Footer tag

Sets the automatic setting of the footer top border height (class= "mt-auto").

But I tried. I couldn't get the desired results here.

Solution method

You can add "fixed-bottom" class to footer by judging the relationship between $(window) and $(document)

$(window) Height () represents the size of the currently visible area

$(document) Height () represents the height of the entire document and can be used on a case-by-case basis.

Whether or not to add a modified class can be decided according to the relationship between them.

The footer is as follows:

Copyright ©Blog 2021

Dynamically add "fixed-bottom" class

If ($(window) Height () = $(document). Height () {

$("# footer") AddClass ("fixed-bottom")

} else {

$("# footer") RemoveClass ("fixed-bottom")

}

Note: if $(window). Height () gets not the height of the window but the height of the document text

That is, (window). H e i g h t () and (window). Height () and (window). Height () and (document). Height returns the same value

That's because DOCTYPE didn't write it.

Please check the html tag and change it to OK.

To this end, I specifically checked the role of:

DOCTYPE is an abbreviation for document type (document type). It is used in web design to indicate what version of XHTML or HTML you are using. The DTD is called the document type definition, which contains the rules of the document. The browser interprets the identity of your page according to the DTD you define and displays it. In particular, no declaration or incorrect declaration will not be displayed properly in a standard browser.

The DOCTYPE declaration is an essential and critical part of building a standards-compliant web page; your logo and CSS will not take effect unless your XHTML determines the correct DOCTYPE.

Used in the web page.