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

This article mainly introduces CSS to achieve Footer bottom of what the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this CSS to achieve Footer bottom of which articles will have a harvest, let's take a look at it.

Footer Sticky footer is to keep the footer portion of a web page at the bottom of the browser window. When the page content is long enough to exceed the browser's visual height, the footer is pushed to the bottom of the page with the content; but if the page content is not long enough, the bottom footer remains at the bottom of the browser window.

1. Set the bottom margin of the content section to a negative number.

This is a more mainstream usage, setting the minimum height of the content section to 100%, and then using the negative bottom margin value of the content section to achieve the effect that the footer is kept at the bottom of the window when the height is exceeded.

Content

Html, body {

Height: 100%

Margin: 0

}

.wrapper {

Min-height: 100%

/ * is equal to the height of footer * /

Margin-bottom:-50px

}

.footer

.push {

Height: 50px

}

This method requires additional placeholder elements (such as .push) in the container.

It is important to note that the margin-bottom value of .wrapper needs to be consistent with the negative height value of .footer, which is not friendly.

2. Set the top margin of the footer to a negative number

Since you can use negative margin bottom on containers, can you use negative margin top? Yes, of course.

Add a parent element to the content and make the bottom margin of the content section equal to the footer height.

Content

Html, body {

Height: 100%

Margin: 0

}

.content {

Min-height: 100%

}

. content-inside {

Padding: 20px

Padding-bottom: 50px

}

.footer {

Height: 50px

Margin-top:-50px

}

However, this approach is the same as the previous one, which requires the addition of unnecessary html elements.

3. Use calc () to set the content height

There is one method that does not require any extra elements-- using CSS3's new calculation function calc ()

In this way, there will be no overlap between elements, and there is no need to control the inner and outer margins--

Content

.content {

Min-height: calc (100vh-70px)

}

.footer {

Height: 50px

}

You may wonder why 70px is subtracted from the content height calc () instead of the height 50px of footer, because it is assumed that the two elements are separated by 20px, so 70px=50px+20px

But you don't have to worry about that--

4. Use flexbox elastic box layout

The footer height of the above three methods is fixed, which is generally not conducive to the layout of the page: the content will change, they are all flexible, and once the content exceeds the fixed height, it will destroy the layout. So use flexbox for footer so that its height can be bigger, smaller and more beautiful-(≧∇≦)

Content

Html {

Height: 100%

}

Body {

Min-height: 100%

Display: flex

Flex-direction: column

}

.content {

Flex: 1

}

You can also add header above or more elements below. You can choose one of the following techniques:

Flex: 1 makes content (e.g. .content) highly scalable.

Margin-top: auto

5. Use Grid grid layout

Grid is much newer than flexbox, and better and simpler

Content

Html {

Height: 100%

}

Body {

Min-height: 100%

Display: grid

Grid-template-rows: 1fr auto

}

.footer {

Grid-row-start: 2

Grid-row-end: 3

}

Unfortunately, grid layout (Grid layout) currently supports only Chrome Canary and Firefox Developer Edition versions.

This is the end of the article on "what are the ways for CSS to achieve the bottom of Footer?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what are the methods of CSS to achieve the bottom of Footer". If you want to learn more knowledge, you are welcome to follow 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.