页脚包装 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

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

height: 100px;

收件人：

min-height: 100px;

Answer 2

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

页脚包装 ul 不会粘在底部

Footer wrapping ul doesn't stick to bottom

css

sticky-footer

flexbox