全列高度，减去页脚和页眉高度

问题描述

| 我有一个似乎很普遍的问题。如果网站的内容不足以填满整个屏幕，则我有一部分网站需要全高。设计是固定宽度的...所以高度是我唯一关心的问题。我已经尝试过CSS中的height：100％和Mozilla的min-height。当我这样做时，它会起作用，除了我的柱子的高度太高之外。看来我的身高是100％加上页眉的高度加上页脚的高度。我最接近的是在我的#main div中添加以下内容：

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

...但这最终使高度适合短内容，但是当我在内容长的页面上时，内容不再将页脚向下压。我还尝试将背景图像简单地应用到整个容器（占据整个高度），但是最终将我的图像放到了所有东西上……也许有一种方法可以将其强制到较低的图层？无论如何，页面中包含太多CSS和HTML，因此链接可能更有用...因此，当我想出一个解决方案时（希望在您的帮助下），我将在此处发布原始和修改的部分...主要的HTML和CSS应该保持多年不变。 http://www.broadwaybaptist.org/beliefs/ 附言我知道有人提到，通常必须使用JavaScript来解决此问题。我对此表示满意...但一点也不知道该如何处理。我也更愿意只用CSS来做...但是我会尽我所能。谢谢！     

解决方法

        先生，您正在谈论页脚有粘性。当页面不够长时，它位于屏幕底部，但当内容足够长时，它与内容一起滑动。 要实现它，您的站点需要具有以下结构：

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

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

<footer>
  ...
</footer>

基本上，将除页脚之外的所有内容都包裹在一个大的

<div>

标签中。 甚至还有一个完整的（很好的）教程，介绍如何使您的网站可以使用它。在此处阅读：http://www.cssstickyfooter.com/using-sticky-footer-code.html