CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Sticky Footer with Flexbox

Jordan C
Jordan C
6,249 Points

Why doesn't putting auto top-margin on the footer work?

Here is my code:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}
Antonio English
Antonio English
Front End Web Development Techdegree Graduate 17,915 Points

The spec says so. 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements

If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.

https://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

1 Answer

Hi, I had the same issue. It's because footer has the margin already set in the base.css file --> .main-footer {margin-top: 30px; } As class selector (.main-footer) has higher specificity than element selector (footer), it will overrule your footer {margin-top: auto;} style. You have to set .main-footer {margin-top: auto;} that should work.

Y B
Y B
14,134 Points

perfect thanks, I did exactly the same thing, I couldn't see why it didn't work.