0

I am trying to use flexbox to position my footer. I would like traditional behavior of the footer - if content is smaller than viewport, it's on the bottom of the screen. If content is larger than viewport, it's below the screen. I have the second option but the first one is causing troubles - instead it is below the screen.

I have something like:

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh;">
  <div>header</div>
  <div>main</div>
  <footer>footer</footer>
</div>

I would expect the browser to calculate the height of the footer and take that into account when distributing the space between the elements. Didn't happen...

Dominik Teiml
  • 505
  • 1
  • 4
  • 12
  • 1
    `min-height` works actually... typo in `minHeigh`? – kukkuz Apr 10 '19 at 15:58
  • As @kukkuz mentioned, you have a typo, still, your _main_ `div` need to fill the remaining space (when there is less content), and for that one generally use `flex: 1`. Check dupe link. – Asons Apr 10 '19 at 16:00
  • And do note, when using `100vh` you need to remove the `body` margin, or else you'll get a scroll even with less content. – Asons Apr 10 '19 at 16:05
  • I don't think the link you provided solves my question. My question is, why doesn't the code I posted produce my desired result? If I change flex-direction to row, it does, so what's the difference between horizontal and vertical direction? – Dominik Teiml Apr 10 '19 at 16:33
  • Solved! [This article](https://css-tricks.com/the-trick-to-viewport-units-on-mobile/) describes both the problem and solution. Can you please un-mark this as a duplicate so I can add an answer to my question? @LGSon – Dominik Teiml Apr 10 '19 at 16:43
  • Your question ask how to keep footer at viewport bottom when less content and get pushed down when content overflow. The dupe answer that. The article you refer to shows how to overcome viewport units issues on mobiles, and for that here's another dupe: https://stackoverflow.com/questions/23223157/how-to-fix-vhviewport-unit-css-in-mobile-safari – Asons Apr 10 '19 at 17:26
  • I also commented that `vh` doesn't take body margin into account, and you need to reset it so it doesn't create a scroll when less content. And your code doesn't produce the wanted outcome as it is not properly set, which again, the dupe explain. So no reason to open your post and add yet one more answer, as what you asked is all covered already. – Asons Apr 10 '19 at 17:32
  • https://greensock.com/forums/topic/14358-tweening-top-calc-value-not-working-in-safari/ – Dominik Teiml Oct 10 '19 at 07:03

0 Answers0