Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to put the footer tag in html5 at the bottom of the page

2025-01-25 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

This article "how to put the footer tag in html5 at the bottom of the page" most people do not understand the knowledge points of the article, so Xiaobian summarized the following content for everyone, the content is detailed, the steps are clear, and it has certain reference value. I hope everyone can gain something after reading this article. Let's take a look at this article "how to put the footer tag in html5 at the bottom of the page" article.

The details are as follows:

_JavaScript:

$(function(){ function footerPosition(){ $("footer").removeClass("fixed-bottom"); //Full text height var contentHeight = document.body.scrollHeight, //Visual window height, excluding toolbar at top of browser winHeight = window.innerHeight; if(! (contentHeight > winHeight)){ //Add fixed-bottom class to footer when the height of web page body is less than the height of visible window $("footer").addClass("fixed-bottom"); } else { $("footer").removeClass("fixed-bottom"); } } footerPosition(); $(window).resize(footerPosition); });

CSS:

.fixed-bottom { position: fixed; bottom: 0; width:100%;} The above is about the content of this article on "how to put the footer tag in html5 at the bottom of the page". I believe everyone has a certain understanding. I hope the content shared by Xiaobian will be helpful to everyone. If you want to know more relevant knowledge content, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report