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

Michael Pashkov
Michael Pashkov
UX Design Techdegree Student 11,350 Points

Alternate sticky footer method

Hi guys! Question is If instead of class I use tag - Sticky method doesn't work. Why?

<footer class="main-footer">

Doesn't work

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

footer {
  margin-top: auto;
} 

Works

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

.main-footer {
  margin-top: auto;
} 

3 Answers

Steven Parker
Steven Parker
163,760 Points

It works identically for me both ways. Perhaps you had a typo when trying the tag which does not show here?

meghana Joshi
meghana Joshi
4,547 Points

Never mind I got the answer here :

janatoc on Apr 25, 2017 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.

meghana Joshi
meghana Joshi
4,547 Points

I have the same problem. The footer tag does not work while the class name works. there is no typo