40

我使用 CSS 制作了以下粘性页脚。底部页面内容当前隐藏在页脚后面（参见随附的屏幕截图）。如何调整我的 CSS 以使所有正文内容都可见并且页脚仍然停留在浏览器窗口的底部？谢谢！

在此处输入图像描述

CSS：

.fo {
    position: absolute;
    left: 0;
    bottom: 0;
    height:65px;
    width: 100%;
    color: #eaeaea;
    margin-left: -8px;
}
4

7 回答 7

36

您可以创建一个清晰的 div 并给它一个高度。

.clear { clear: both; height: 60px; }

<div class="clear"></div>
<div id="footer">FOOTER CONTENT</div>

高度是您将内容保持在页脚上方所需的任何内容，例如。比页脚高。如果页脚是 50px；高，我做 60px；对于清晰 div 中的高度。因此，当我滚动时，页脚保持在原位，但当我到达底部时，从页脚后面流出的内容有空间被推到页脚上方而不会被覆盖。超级简单，而且效果很好。

于 2013-08-03T21:04:49.340 回答
30

我过去在互联网上遇到过这个答案。效果很好：

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

    html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
/* IE 6 and down:
#container {
   height:100%;
}
于 2012-12-14T17:12:42.160 回答
1

当我想出自己的解决方案时，我也遇到了麻烦。我将页脚设置height为10%：

footer{
  position: fixed;
  **height:10%;**
  width:100%;
  padding-top: 2px;
  bottom: 0;
  clear: both;
  background-color: black;
  color: white;
  float: left;
  overflow: auto;
}

和我的内容有bottom margin一个11%：

#content{
  width: 800px;
  margin: auto;
  background-color: rgba(0,0,0,.7);
  color: #99FFCC;
  height: 80%;
  padding:30px;
  **margin-bottom: 11%;**
}

我希望这可以帮助任何有同样问题的人！

于 2015-12-17T21:34:19.023 回答
1

这可以帮助，在 HTML 的末尾：

.spacer{
  margin-bottom: 110px; /* how high is your footer */
  visibility: hidden; 
}
<div  class="spacer"> . </div> /* you need to type someting, simple point can do the trick */

于 2020-07-11T11:15:21.210 回答
0

我遇到了同样的问题，其他解决方案为我指明了正确的方向，但是因为我使用的是 Angular Material，所以我所要做的就是添加 layout="column" 并且效果很好

    <div id="container" layout="column">
       <div id="header"></div>
       <div id="body"></div>
       <div id="footer"></div>
    </div>
于 2017-11-17T23:46:18.463 回答
0

我只是在页脚前面添加了一个空的 div，并用 id (div-spacer) 命名它：

<div id="div-spacer"></div>

然后我创建了一行简单的代码来获取最后一个元素的高度并将其设置为 div：

$(document).ready(function () {
  $('#div-spacer').css("height",$('.card-transaction:last').css("height"));
});

使用此解决方案，最后一个元素始终可见！

于 2018-10-30T18:20:15.247 回答
-6

我刚刚在正文末尾添加了 br 标签 5 次，以创建一些额外的空格。它帮助了我。

有时保持简单的作品！

于 2016-12-14T16:12:46.067 回答