使用 flexbox 和 margin-top: auto 将页脚粘贴到页面底部不工作

Question

我正在尝试使用 margin-top: auto; 让我的页脚固定在页面底部，但它没有任何效果。

我认为这可能是因为父级没有设置高度但是当设置 height: 100vh 时它只是缩小了页脚：https://i.imgur.com/FBXpT7U.png

我不明白为什么这不起作用。

HTML:

<body>
    <div class="footer">
        <p>Text here</p>
    </div>

</body>

CSS:

body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.footer {
    background-color: #1F2937;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    margin-top: auto;
}

我正在完成一个关于“奥丁计划”的项目。这是完整的代码：codepen

Answer 1

您需要设置 max-width 而不是使用 padding:700px 以获得所需的样式！

.testimonial-text {
  /* padding:700px; */
  max-width:500px;
  ...
}

Answer 2

在您的 CodePen 中，页脚下方的空白被 .testimonial-text 上的 padding: 700px 占据。删除它（或将其降低到合理的值）可以解决问题。

使用 flexbox 和 margin-top: auto 将页脚粘贴到页面底部不工作

Sticking footer to bottom of page using flexbox and margin-top: auto; not working

html

css

flexbox