Question

我已经踩了很多，仍然没有正确定位我的页脚。我试图将我的页脚放在页面底部，只有当我滚动到底部时才能看到它。

我已将以下类添加到页面中：

<div class="wrap">

<!-- Holds all the page content inside -->

<div class="spacer"></div>
</div>

<div class="footer">
.....
</div>

我已将以下css添加到课程中：

.wrap {
 min-height: 100%;
 margin-bottom: -100px;
    padding:5%;
}

/* Set the fixed height of the footer here */
.footer {
  position: relative;
  background-color: #222;
  z-index: 1;
}

.spacer, #footer {
    height: 100px;
}

我做错了什么并阻止页脚始终保持在底部？

Answer 1

将您的页脚定位为absolute并将bottom: 0添加到页脚类。

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

Answer 2

更优雅的解决方案就是这样

＆＃13;

html, body{
 margin: 0;padding:0;
}
.fake-body{
  height: 200px;
  overflow: auto;
}
.wrap {
 position:relative;
}

/* Set the fixed height of the footer here */
.footer {
  position: absolute;
  background-color: #222;
  z-index: 1;
  bottom:0;
  left:0;
  right:0;
  color:white;
}

.spacer, #footer {
    height: 300px;
}

＆＃13;

<div class="fake-body">
<div class="wrap">

<div class="spacer">spacer</div>

<div class="footer">footer</div>
  
</div>
</div>

＆＃13;

Answer 3

将此添加到页脚类

position: relative;
bottom: 0;
margin: 20px 0 0 0;
width: 100%;

这会将页脚保持在底部

<div class="footer">
Your content
</div>

如何在页面底部保持页脚

3 个答案: