在页眉和页脚之间填充DIV，但不多了

Question

我怎样才能有一个页眉和页脚，其间有一个MainContent div填充所有可用区域但从不延伸到页脚或页眉之外？

换句话说，填充页眉和页脚之间的剩余空间，但从不再使用空间？

我想不出怎么做到这一点。我尝试了很多尝试，但没有成功，因为中间内容div总是溢出我不希望发生的页脚顶部。我希望内容div只能延伸到页脚顶部，就是它。

我确实试过设置溢出：隐藏;但这只是阻止滚动条出现，没有别的。

不允许使用Javascript。

Answer 1

如果绝对定位页眉和页脚，则应该能够将内容div的高度和宽度设置为100％。确保将内容div的位置设置为相对。

Answer 2

基本上，您可以将bottom属性设置为页脚的高度，并将overflow属性设置为auto，以便在必要时添加滚动条，以防止溢出。

如，

#content {
   position: absolute;
   top: <height of header>px;
   bottom: <height of footer>px;
   overflow: auto;
}

这是一个演示： http://jsfiddle.net/bYdgj/1/

Answer 3

标题和页脚总是应该在屏幕的那个位置？

如果是，则可以将position: fixed;属性用于css。这样，您可以将页眉和页脚锚定到窗口屏幕。

如果它们被主div覆盖，则在其上抛出一个z-index和主内容div（确保主内容具有position属性和小于页眉和页脚的z-index）

一旦你这样做，你可以在你的主内容div上抛出边距，以确保它保持在你的页眉/页脚之间

Answer 4

有几种可能的方法：

1. 使页眉和页脚绝对，然后让身体高度为100％
2. 如果您想要使用颜色或图片填充页眉和页脚以外的整个页面，只需将正文background-color或background-image更改为您喜欢的内容即可完成
3. 将内容设为100％并放置页眉和页脚top: 0和bottom: 0
4. 制作页眉和页脚position: fixed，但页眉和页脚将位于正文前

我会选择第二种方法，因为我无法想象你需要在页眉和页脚之间准确填充内容的情况。