Question

我在JSFiddle上做了一个可复制的版本：https://jsfiddle.net/deoa0cyo/1/

我有html

<div class="container">
  <div class="top">
    <img class="top-img" src="http://www.reunitingall.com/wp-content/uploads/2015/01/Cat-Sun-God-640x388.jpg" />
    <h3>
      Group Cats
    </h3>
  </div>
  <div class="bottom">
    <ul>
      <li>one cat</li>
      <li>two cats</li>
      <li>green cats</li>
      <li>blue cats</li>
      <li>one cat</li>
      <li>two cats</li>
      <li>green cats</li>
      <li>blue cats</li>
      <li>one cat</li>
      <li>two cats</li>
      <li>green cats</li>
      <li>blue cats</li>
      <li>one cat</li>
      <li>two cats</li>
      <li>green cats</li>
      <li>blue cats</li>
    </ul>
  </div>
</div>
<footer class="footer">
  footer text! Wooohoooo
</footer>

但页脚与我的底部div重叠。我希望底部div尽可能大，而不会重叠我的浮动页脚。我怎样才能做到这一点？

Answer 1

你可以做多件事。在你给我们的例子中，最好的办法是：

.container {
    width: 300px;
    padding-bottom: 50px;
}
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color:white;
}

JSFiddle

这会为.container添加padding-bottom: 50px。填充量应与页脚高度相同。这也会在页脚中添加background-color: white，而白色当然应该是文本背后的颜色。

如果无法做到这一点，您可以将.container的高度设置为calc(100vh - 50px)并添加overflow-y: scroll。你将在.container的侧面有滚动条。另请注意calc（）will not work on all browsers。

您可以使用this问题的答案来隐藏滚动条。

Answer 2

试试这个

.footer {transform：translate（x，y）;

}

例如

.footer { 变换：翻译（500像素，700像素） }

Answer 3

设置body溢出到hidden并在容器div上设置溢出。同时将容器div的高度设置为100% - footerHeight

我做了这些更改以及一些小改动。检查您是否正在寻找这样的东西：

https://plnkr.co/edit/h0W0NxFPkNl4HtUhlgDP?p=preview

如何使可滚动div匹配浏览器的高度减去页脚？

3 个答案: