Question

我有一个看似相当普遍的问题。如果内容不足以填满屏幕，我的网站部分需要全高。设计是固定宽度的...所以高度是我唯一关注的问题。我尝试过高度：100％，在CSS和Mozilla的最小高度。当我这样做时，它可以工作，除了我的列结束了太高。看来我的身高是100％加上我头部的高度再加上我的页脚高度。我得到的最接近的是将以下内容添加到我的#main div：

position: absolute;
top: 125px;
right: 0;
left: 0;
bottom: 0;

...但是这最终使高度非常适合短内容，但是当我在一个内容很长的页面上时，内容不再将我的页脚推到它下面。我也试过简单地将背景图像应用到整个容器（它占据了整个高度），但最终将我的图像放在所有东西上...也许有办法做到这一点，但强迫它到较低层？无论如何，页面中涉及到如此多的CSS和HTML，链接可能更有用......所以当我想出一个解决方案（希望在你的帮助下）时，我会在这里发布原始和修改的部分......主HTML和CSS应该保持多年不变。 http://www.broadwaybaptist.org/beliefs/

P.S。我知道有人提到JavaScript通常必须用来解决这个问题。我对此很好......但是根本不知道如何处理这个问题。我也更愿意只使用CSS ...但我将采取我能得到的。谢谢！

Answer 1

先生，您正在谈论一个粘性页脚。当页面长度不足以将其向下推时，它位于屏幕的底部，但当内容足够长时，它会与内容一起滑动。

要实现它，您的网站需要具有这种结构：

<div id="wrapper">
  <header>
    ...
  </header>

  <div id="content">
    ...
  </div>
</div>

<footer>
  ...
</footer>

基本上，将所有内容包装在一个大的<div>标记中除了页脚之外。

甚至还有关于如何使您的网站使用它的完整（好的，种类）教程。请在此处阅读：http://www.cssstickyfooter.com/using-sticky-footer-code.html

全栏高度减去页脚和页眉高度

1 个答案: