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 does CSS keep the footer close to the bottom of the page

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

Share

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

This article mainly explains the "CSS how to make the footer close to the bottom of the page", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "CSS how to make the footer close to the bottom of the page" bar!

HTML code

The following is the basic structure of the HTML code, with the footer tag outside the wrap tag.

The content of the page can be placed inside the main tag. For example, here is the HTML code for a two-column floating page layout

Header is placed inside wrap and on top of main, as shown below

If you need to put some elements outside the wrap or footer, they must use the absolute position; otherwise, the calculated 100% height on the page will be messed up.

CSS code

The following CSS code keeps the footer close to the bottom of the page.

/ Example Source Code/ html, body, # wrap {height: 100%;} body > # wrap {height: auto; min-height: 100%;} # main {padding-bottom: 150px;} / * must be same height as the footer / # footer {position: relative; margin-top:-150px; / negative value of footer height * / height: 150px

You will find that the footer height is reused here three times, which is critical, and the three heights must use the same value. The height property of wrap stretches itself to the full height of the window, and a negative margin raises the footer to the padding position of main, because the main is already inside the wrap, so the padding of main is already part of the height of wrap. In this way, footer is left at the bottom of the page. It's not finished yet. We still need to go to clearfix main.

Clearfix Hack to the Rescue

Most SS designers are familiar with Clearfix Hack, which solves the problem of suspending many elements. Here, we use it to make the footer in the Google Chrome close to the bottom of the page. It also solves the problems caused by the two-column suspension layout. In this way, you can put the content in one column and the sidebar in another column, so that the floating content in the main under individual browsers will not cause the footer to float up. The following code is also added to our stylesheet

/ Example Source Code/ .clearfix: after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} / * Hides from IE-mac * / * html .clearfix {height: 1%;} .clearfix {display: block;} / * End hide from IE-mac * /

If you prefer Ryan Fait's approach, add extra push, and you also need to use clearfix in a multi-column floating page.

What you need to know

Height and margin

Inside the Header,wrap or main tag, if you use top or bottom margin for some elements, the footer may be moved down, which is usually the height of the margin used. In this case, you can use padding instead of margin to fill the element gap. When there is little content on the page, the footer should be at the bottom of the page, and the scroll bar of the window tells you where the footer is at the bottom of the page. Find the troublesome margin and replace it with padding. Be careful when declaring padding for main. If you add this code: padding:0 10px 0 10px, you overwrite the crucial padding that should be the same as footer. In Google Chrome, when there is a lot of content on the page, the footer will overlap with the content of your page.

Font size

When setting font size, if you use relative size, be aware that some visitors may use larger fonts in the display configuration. If there is not enough space under the footer to accommodate large fonts, the page height setting will be broken, resulting in extra gaps under the footer. So, use absolute size (px), not pt or em.

Thank you for your reading, the above is the content of "CSS how to make the footer close to the bottom of the page". After the study of this article, I believe you have a deeper understanding of how CSS makes the footer close to the bottom of the page. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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: 211

*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