粘性页脚隐藏内容

Question

我为粘性页脚制作了​​以下CSS，但我遇到的问题是当内容溢出滚动时，一些内容隐藏在页脚后面（参见附页截图）。请告诉我如何解决这个问题，以便粘性页脚应该粘贴到底部或某些比例的填充顶部等，内容不应该隐藏。

CSS：

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

Answer 1

对不起，如果这个太旧了，但我想出了一个对我来说非常好的解决方案！我创造了一个明确的div并给它一个高度。

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

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

高度是您将内容保持在页脚上方所需的任何内容，例如。比页脚高。如果页脚是50px;高，我做60px;对于透明div中的高度。因此，当我滚动时，页脚会保持在原位，但是当我到达底部时，从页脚后面流出的内容有足够的空间被推到页脚上方而不会被遮住。超级简单，它完美地工作。也许有人可以纠正我，如果有什么问题，比如某种冲突。对不起，这是一篇较旧的帖子，但我觉得我可以添加这个，因为我自己发现这篇文章寻找解决方案。

Answer 2

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

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%;
}

Answer 3

当我提出自己的解决方案时，我也遇到了麻烦。我将页脚设置为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%;**
}

我希望这可以帮助那些遇到同样问题的人！

Answer 4

我遇到了同样的问题，而其他解决方案指出了我正确的方向，但因为我使用的是Angular Material，我所要做的就是添加layout =＆＃34; column＆＃34;它工作得很好

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

Answer 5

我只是在页脚前面添加了一个空的div，并用id（div-spacer）将其命名：

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

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

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

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

Answer 6

这可以帮助您， 在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 */

Answer 7

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

  

有时保持简单的工作!!!