Question

我正在尝试粘贴页脚。我搜索了许多示例并尝试了但失败了。此链接是我尝试的示例。 https://css-tricks.com/snippets/css/sticky-footer/

当我将相同的代码粘贴到html时，页脚不会停留在底部，而只是停留在主div的中心，或者只是推出主要内容并停留在main div内，我想知道我的HTML是否存在问题。

这是CSS。

*, *:before, *:after {
    box-sizing: inherit;
}

html {
    -webkit-font-smoothing: antialiased;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    line-height: 1.5;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 10px 20px;
}
.main{
    width: 70%;
 }

这是HTML。

<body>
  <header>
    </header>

   <div class="main">
    </div>

    <footer>
    </footer>
    </body>

编辑1：我加了图片。

灰色框是应该保留在main内部的内容，我希望页脚保留在main div的末尾。但是，到目前为止，页脚始终在浏览器中间显示内容。

Answer 1

您可以继续进行此示例，并在您的网页中使用此示例，该示例由我的自举Example here提供

如果您需要固定页脚，则Bootstrap在网页中提供.fixed-bottom类。代码如下：-

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

Answer 2

设置bottom: 0;和position: absolute;并删除以下不必要的代码

sticky bootstrap 4 doc（我打开并在F12中看到）

footer {
       position: absolute;
       bottom: 0;
       width: 100%;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="main">
</div>

<footer>
footer
</footer>

HTML：使用引导程序响应添加粘性页脚

2 个答案: