Question

在我的网站中，我的页脚高度为100px，页脚的css如下所示：

.footnote {
  width: 95%;
  height: 100px;

  position: fixed;
  background: url('../images/coolfooter.png') bottom center;

  bottom: 40px;
  left: 30px;
 }

问题是如果我的网页上有太多内容，内容就会开始与页脚重叠。

enter image description here

我想将内容限制为仅以某种方式显示在页脚上方，以便内容不会与页脚重叠。怎么办呢？

Answer 1

你试过z-index吗？正如其他人所说的那样，如果不看html就很难说。我不是100％肯定你要求的。

Answer 2

您基本上需要确保内容的底部边距大于或等于页脚的高度，或者（如果内容位于某种容器中），它的容器底部填充等于或者大于页脚的高度。

这是一个相当受欢迎的参考网站，用于执行所谓的“粘性页脚”：http://www.cssstickyfooter.com/

Answer 3

将overflow:auto添加到div.content就足够了。

<html>
<head>
  <style type="text/css">
    div.header
    {
      top:0px;
      height:100px;
      max-height:120px;
      min-height:100px;
    }
    div.content
    {
      height:600px;
      max-height:750px;
      overflow:auto;
    }
    div.footer
    {
      height:100px;
      max-height:120px;
      min-height:100px;
      clear:both;
    }
  </style>
</head>
  <body>
    <div class="header"></div
    <div class="content"></div>
    <div class="footer"></div>
  </body>
</html>

仅在页脚上方限制内容

3 个答案: