Question

我想使页脚停留在每页的底部，而不必进行过多的上课。

我需要的是一个页脚，该页脚位于每个页面的底部，无论内容是否过于稀缺，不“发粘”或使用位置：固定。

我已经完成了研究，并研究了其他问题的其他答案，但是它们要么拥有太多的类，要么使用position：fixed，要么使用JS。

这是layout.pug文件的代码：

.footer-wrapper
    footer &copy; 2018 Demo Website

我在SCSS中尝试过的代码在这里：

.footer-wrapper {
    // min-height:100%;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}

footer {
    background-color: #0A0A0A;
    color: white;
    // height: 60px;
    bottom: 0;
    text-align: center;
    position: absolute;
    width: 100%;
    padding: 1.5rem;
    // display: grid;
    // margin-top: auto;
    // padding:10px;
}

非常感谢！

Answer 1

有一种非常便宜的方法，实际上非常好。

假设您也使用标题，则可以执行以下操作：

<header>
<div id = "body">
<footer>
...
<style scoped = "scss">
#body {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column; 
    margin-top: <header_height>;
    margin-bottom: <footer_height>;
}
</style>

基本上，它设置了正文内容以填满整个页面，但在页面顶部为页眉保留了空间，在页面底部为页脚保留了空间（如果没有弯曲）。如果没有足够的空间容纳页面上的正文内容，body div将在列中弯曲，并自动随之移动页脚。

希望这会有所帮助！

Answer 2

类似的事情应该起作用。让flex-grow属性处理.content容器的高度。

<div class="main">
    <div class="header">header</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
</div>

<style>
    .main {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 100vh;
    }

    .content{ flex-grow: 1; }
</style>

如何使页脚在没有很多类的情况下停留在每一页的底部？

2 个答案: