Question

您好我正在尝试使用粘性页脚制作简单的页面。页脚粘在底部但是当有很多内容时它会粘在粘性页脚后面。为什么呢？

html, body{
height: 100%;
min-height: 100%;
}
#wrapper{
height: 100%;
min-height: 100%;
margin-bottom: -50px;
}
#footer{
height: 50px;
background-color: blue;
}

<html>
<body>
<div id="wrapper">
</div>
<div id="footer"></div>
</body>
</html>

Answer 1

请勿使用position:absolute创建粘性页脚。我建议你使用flexbox。请检查我的fiddle

代码段：

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

.footer {
  background: crimson;
}

<main>
  <h2>Your Content goes here...</h2>
</main>

<footer class="footer">
  This is sticky footer
</footer>

Answer 2

使用fixed或absolute定位以及width

html,
body {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  height: 100%;
  min-height: 100%;
  margin-bottom: -50px;
}

#footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 50px;
  background-color: blue;
}

<html>

<body>
  <div id="wrapper">
  </div>
  <div id="footer"></div>
</body>

</html>

Answer 3

code中的static footer sticky而非sticky使#footer { position: fixed; bottom: 0; z-index: 999; }执行此操作。

{{1}}

粘性页脚不起作用

3 个答案: