Search code examples
cssflexboxsticky-footer

Footer wrapping ul doesn't stick to bottom

I have a simple HTML layout with header, content and footer.

Inside the footer I have an unordered list (<ul>).

I'm using Flexbox to enforce the footer stick to the bottom of the page.

While usually it works very well for me, in this situation it doesn't.

Here is a Codepan.

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.content {
  flex: 1 0 auto;
  width: 100%;
}

header,
footer {
  flex-shrink: 0;
  width: 100%;
  height: 100px;
}
<header>
  Header
</header>
<section class="content">
  Content
</section>
<footer>
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  </ul>
</footer>

Again, without the ul the footer does stick to the bottom. But with the <ul>, it doesn't.

Any idea how I can solve this?

Thanks!

Solution

  • You set height of the footer to only 100px. The UL exceeds that. Change:

    height: 100px;

    To:

    min-height: 100px;