Question

我已尝试过所有内容，但页脚不在页面底部。我尝试了position: fixed;，但是当我向下滚动时，它始终保持在同一位置。

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
}

.footer, .push {
  height: 142px;
  background: black;
}

Answer 1

使用以下CSS：

.footer { 
  position:fixed; 
  left:0px; 
  bottom:0px; 
  height:142px; 
  width:100%; 
 background:black; 
}

这里是测试小提琴：https://jsfiddle.net/85nyb2mv/

Answer 2

如果要使用//PlayViewController class PlayViewController: UIViewController { var players = [String]() var nbPlayer:Int { return players.count } ... }，元素将始终位于屏幕的相同位置。如果您希望页脚位于包装器元素的底部，请尝试将position: fixed提供给position: relative并将.wrapper提供给position: absolute，它会将您的页脚放在包装器的底部。这是一个例子：

.footer

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
background-color: gray;
position: relative;
}

.footer, .push {
 height: 142px;
 width: 100%;
 background: black;
 position: absolute;
 bottom: 0;
 left: 0;
 }

Answer 3

使用此CSS样式：

.wrapper {
  height: calc(100% - 142px);
  margin: 0 auto;
}

.footer {
  height: 142px;
  background: black;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

Answer 4

案例1

当body'height大于100vh

时

body{
  margin: 0;
  padding: 0;
  min-height: 100vh;
  height: 2000px;
  position: relative;
  background: pink;
}
header{
  width: 100vw;
  height: 100px;
  background: gold;
}
footer{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100vw;
  height: 100px;
  background:darkgray;
}

<body>
  <header>
  </header>
  <footer>
  </footer>
</body>

案例2

当body'height小于100vh

时

body{
  margin: 0;
  padding: 0;
  min-height: 100vh;
  height: 200px;
  position: relative;
  background: pink;
}
header{
  width: 100vw;
  height: 100px;
  background: gold;
}
footer{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100vw;
  height: 100px;
  background:darkgray;
}

<body>
  <header>
  </header>
  <footer>
  </footer>
</body>

Answer 5

**html**
<body>
  <header>
  </header>
  <section>
  </section>
  <footer>
  </footer>
</body>

**CSS**
<style type="text/css">
 footer { 
  position:fixed; 
  left:0px; 
  bottom:0px; 
  width:100%; 
  background:black; 
  color:#fff;
  z-index:99;
}
</style>

Answer 6

问题是<div class="fade">，所以我删除了它并添加了

.page-content:after {
  content: "";
  display: block;
}

<div class="page-content"> ----＆gt;页眉和页脚之间

如何将页脚保持在底部

6 个答案: