CODEWITHSUNDEEP
cssflexbox
Wordpressor
Wordpressor

Reputation: 7543

Flexbox - make footer stick to the bottom of the page at all times?

I know, this has been asked 1000 times but NO solution from stackoverflow seem to work for me.

Everyone does stuff like .container { height: 100vh; } while the whole idea is to have footer at the bottom if main content of the page has not enough content to stretch.

Parent has flex as display and column direction. Children have flex-grow: 1 and flex-shrink: 0 respectively. Why does it not work? Why is footer not at the very bottom? What am I missing? I don't know height or footer or main, I want the main to take up all the free space at all times.

JSFiddle version: https://jsfiddle.net/6v2gb1s0/

* {
  border: solid 1px red;
}

html, body {
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
}

main {   
  flex-grow: 1; 
}

footer {
  flex-shrink: 0;    
}
<div id="container">
  <main>main content</main>
  <footer>footer</footer>
</div>

Upvotes: 0

Views: 73

Answers (2)

Adam
Adam

Reputation: 5919

It's fundamentally the way flexbox works. display:flex dictates how its children behave, not the parent element. That element just behaves like a normal div. Thus the parent will try to extend to 100% of the width of the parent container and shrink to the height of the content so you have to set the height (or preferably min-height) to 100%.

To understand more how it works, you can set the body element to display:flex and that will cause its child element (the container) to then stretch like you'd expect, which would be an alterntative to setting the container height to 100%.

Hope this helps.

Upvotes: 1

Johannes
Johannes

Reputation: 162

The footer won't go to the bottom because the height of the #container is not set.

If you set

#container {
  height: 100%
}

The footer will go to the bottom (albeit there will have a scroll because of the margins, so you gotta compensate for that).

Check it out:
Edit blissful-babycat-0rivmi

Upvotes: 2

Related Questions