Question

我目前在我的网站上有一个页脚，我希望它始终位于页面底部。在大多数屏幕上只有一行，所以我认为将它永远放在那里是个好主意。我也希望远离JavaScript。

CSS

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

HTML

<div class="footer">
    <p class="footer">Design by <a class="footer" href="http://www.tropilac.com">Tropilac</a></p>
</div>

Answer 1

如果您需要随时显示，请使用position: fixed。

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
* {
  margin: 0;
  padding: 0;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: lightgray;
  color: black;
}

＆＃13;

<html>

<body>
  <div class="footer">
    <p class="footer">Design by <a href="http://www.tropilac.com">Tropilac</a>
    </p>
  </div>
</body>

</html>

＆＃13;

Answer 2

尝试将元素定位到固定。这对于诸如页脚之类的元素非常有用，就好像你这样做：

.footer {
  position: fixed;
  height: 50px;
  border: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  left: 10%;
  right: 10%;
}

这将为您提供一个停留在视口底部的页脚。一个缺点是，如果内容比页面长，则页脚仍将显示位于页面底部。此代码还可以为您提供80％的宽度。

小提琴：pull request

Answer 3

使用position:fixed和bottom:0获取您想要的内容

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

始终在页面底部放置页脚

3 个答案: