页脚包装 ul 不粘在底部

Question

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

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

我正在使用 Flexbox 强制将页脚棒固定在页面底部。

虽然通常它对我来说效果很好，但在这种情况下它就不行了。

这是一个代码盘。

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 大小将取决于其中的内容。