页脚包裹ul不会粘到底部

Question

我有一个带标题，内容和页脚的简单HTML布局。

在页脚内部，我有一个无序列表（<ul>）。

我正在使用Flexbox强制页脚粘贴到页面底部。

虽然通常它对我来说效果很好，但在这种情况下却没有。

这是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>

同样，没有ul，页脚会粘到底部。 但是对于<ul>，它没有。

知道如何解决这个问题吗？

谢谢！

Answer 1

您将页脚的高度设置为仅100px。 UL超过了这一点。变化：

height: 100px;

要：

min-height: 100px;

Answer 2

您已将页脚和页眉高度设置为100px，这是导致其无法正常工作的原因。 从页脚中删除height属性，div大小将取决于其内部的内容。