Get the App
SLTechnology News&Howtos  ›  Development  › 

How to use pure css to realize that footer is always at the bottom of the page without scrolling with the page

Shulou Source: shulou.com Published: 2022-06-03 08:43:37 11月15日 Update

This article mainly introduces how to use pure css to achieve footer at the bottom of the page without scrolling with the page, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Css

The code is as follows:

Html, body, # sticker {height: 100%;}

Body > # sticker {height: auto; min-height: 100%;}

# stickerCon {padding-bottom: 40px;}

# footer {margin-top:-40px; height: 40px; width: 100%; text-align: center; line-height: 40px; color: # ABA498; font-size: 12px; background: # fafafa; border-top:1px solid # E7E7E7;}

Html

The code is as follows:

Footer

Thank you for reading this article carefully. I hope the article "how to use pure css to achieve footer without scrolling with the page at the bottom of the page" is helpful to everyone. At the same time, I also hope you can support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Tags: Pages articles bottom code value interest at the same time more friends knowledge editing industry information information channels channels references learning help support Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Huawei Linux NVidia MySQL Shulou Tech Info