Css make footer at bottom

Содержание

Sticky Footer, Five Ways
Comments
Problem
Solution
Setting body height
Setting margin top on footer
Using Flexbox
Bonus: Align content vertically center
Bottom Footer (CSS Grid, Flexbox, & Absolute Position Methods)
The Problem With Website Footers
How to Push Footers to the Bottom of a Webpage
CSS Grid — Bottom Footer
Demo
The HTML
The CSS
CSS grid browser support
Download the demo files
Popular layouts with bottom footers
Ezoic — Best ad network for publishers
Jasper — Best Content Creation Tool
Canva — Best Graphic Design Software
SiteGround — Best Website Hosting

The purpose of a sticky footer is that it “sticks” to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window. Note that “sticky” here is exactly as described above. It’s not to be confused with position: fixed; which can be used to “stick” an element in place even if the page scrolls. Or, even more confusingly, it’s not position: sticky; either, which is liked fixed positioning inside of containers sort of.

There is negative bottom margins on wrappers

There was a wrapping element that held everything except the footer. It had a negative margin equal to the height of the footer. That was the basis of this one.

html, body < height: 100%; margin: 0; >.wrapper < min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: -50px; >.footer, .push

See the Pen Sticky Footer with calc(); by Chris Coyier (@chriscoyier) on CodePen. This one required an extra element inside the content area (the “ .push “), to ensure that the negative margin didn’t pull the footer up and cover any content. The push was also clever because it very likely didn’t have any bottom margin of it’s own. If it did, that would have to be factored into the negative margins, and having those two numbers not in sync doesn’t look quite as nice.

There is negative top margins on footers

This technique did not require a push element, but instead, required an extra wrapping element around the content in which to apply matching bottom padding to. Again to prevent negative margin from lifting the footer above any content.

html, body < height: 100%; margin: 0; >.content < min-height: 100%; >.content-inside < padding: 20px; padding-bottom: 50px; >.footer

See the Pen Sticky Footer with Negative Margins 2 by Chris Coyier (@chriscoyier) on CodePen. Kind of a wash between this technique and the previous one, as they both require extra otherwise unnecessary HTML elements.

Читайте также: Python django sql server

There is calc() reduced height wrappers

One way to not need any extra elements is to adjust the wrappers height with calc(). Then there is not any overlapping going on, just two elements stacked on top of each other totaling 100% height.

See the Pen Sticky Footer with calc(); by Chris Coyier (@chriscoyier) on CodePen. Notice the 70px in the calc() vs. the 50px fixed height of the footer. That’s making an assumption. An assumption that the last item in the content has a bottom margin of 20px. It’s that bottom margin plus the height of the footer that need to be added together to subtract from the viewport height. And yeah, we’re using viewport units here as another little trick to avoid having to set 100% body height before you can set 100% wrapper height.

The big problem with the above three techniques is that they require fixed height footers. Fixed heights are generally a bummer in web design. Content can change. Things are flexible. Fixed heights are usually red flag territory. Using flexbox for a sticky footer not only doesn’t require any extra elements, but allows for a variable height footer.

html, body < height: 100%; >body < display: flex; flex-direction: column; >.content < flex: 1 0 auto; >.footer

flex: 1 on the child you want to grow to fill the space (the content, in our case).
or, margin-top: auto to push the child away as far as it will go from the neighbor (or whichever direction margin is needed).

Remember we have a complete guide for all this flexbox stuff.

Grid layout is even newer (and less widely supported) than flexbox. We have a complete guide for it too. You can also fairly easily use it for a sticky footer.

This demo should work in Chrome Canary or Firefox Developer Edition, and can probably be backported to the older version of grid layout for Edge:

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

The issue here is that it requires a fixed height to work. If content wraps when the browser resizes or if the content is dynamically added (possibly different content depending on the page), the fixed values won’t work.

This, naturally, depends on your level of browser support. But it’s another option! (Note that if for whatever reason you have a content wrapper you can’t get rid of—something I just ran into while working in an Ember app—the body code should be on that wrapper.)

I think the vw & vh units will not work on early Android os – not sure about newer ones, or how big a problem this is.

vh and vw don’t take scrollbars into account, nor do they account for the sliding address bar on mobile safari. I recommend avoiding them.

Long before Flexbox, there was also a way to make sticky footer with display:table and display: table-footer-group : http://codepen.io/SelenIT/pen/QELpww. It has some drawbacks (e.g. needs extra wrappers just to add paddings), but it is supported back to IE8. Should it be also mentioned here?

Wow… I’ve never thought of this one. Seems pretty bullet-proof. Sucks that you have to have the wrappers, but I like it!

This is what I used up until I switched to Flexbox. For browsers that don’t support Flexbox, I am not fussed about the stickiness of the footer.

Источник

Problem

If you are new to web development and have created some HTML page before then you may be in a situation where you find that your footer is not at the bottom of page and there is white space at the bottom because there is not much content.

here is simple html code that produce this result which is not we want.

  This is Header.
 
 This is main content.
 
 This is Footer.

As you can see there are not much content so my footer is not in the bottom of the page. Technically it is bottom of the page but our page is not long enough.

Solution

Setting body height

We can set our body min height to 100vh that will make our page at least as long as screen height But it will not solve our problem.

We can set margin-top on footer element that will make our footer to stay at the bottom of the page but when we have multiple pages and every page has different content length we have to set right amount of margin on every page one by one.

Using Flexbox

First set the min-height of body to 100vh. min-height: 100vh; .
Set the body display to flex display: flex; and flex-direction to column flex-direction: column; .
Select footer element (of whatever you want to stick to bottom) and set top margin to auto margin-top: auto; .

Your CSS should look something like this.

And the problem should be fixed.

Bonus: Align content vertically center

When you don’t have much content to fill the full height of screen like simple login form, you you may want to align your content vertically center.
To do this just remove margin top from footer and set margin top and bottom to auto margin: auto 0; on your main content (in my case article element) or margin: auto; to center it on both direction (vertically and horizontally) and it will make content align to center.

Your CSS should look something like this.

Источник

In this article, I will show how to keep footers at the bottom of the page with CSS grid, Flexbox, and absolute positioning methods.

But first, why would we want to do this?

The Problem With Website Footers

When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath.

This can look bad, particularly on a large screen.

Web designers are often asked to push footers down to the bottom of the viewport, but it’s not immediately obvious how this can be done.

How to Push Footers to the Bottom of a Webpage

The ideal solution must satisfy the following 3 criteria:

A) Short content: Footer gets pushed down to the bottom of the viewport.
B) Long content: Footer comes after long content (pushed below the viewport).
C) Large footer: The solution must work with footers of variable height.

Now, let’s look at the three methods.

To make a bottom footer with CSS grid we give our grid container a min-height equal to the viewport height then instruct our main content column to take up any leftover space.

Demo

The HTML

 Header Main content
 Footer

The CSS

We set the height of the grid container to 100vh (100% viewport height) or 100svh (100% small viewport height) for modern browsers. Then, the auto declarations cause the header and footer to stay at their natural height while the 1fr (one fraction) declaration causes the main content area to grow in height to fill the remaining vertical space.

You can read more information about the new viewport units on web.dev (source).