在页眉和页脚之间填充DIV，但不再填充
在页眉和页脚之间填充DIV，但不再填充
提问于 2013-08-22 00:25:32
我怎么能有一个页眉和页脚，中间有一个MainContent div，可以填充所有可用的区域，但从不超出页脚或页眉的范围？
换句话说，在页眉和页脚之间填充剩余的空间，但永远不使用更多的空间？
我想不出我是怎么做到的。我尝试过多次尝试，但都失败了，因为中间的内容div总是溢出超过页脚顶部，这是我不希望发生的。我希望内容div只延伸到页脚顶部，仅此而已。
我确实尝试设置溢出:隐藏；但这只是阻止滚动条出现，没有其他。
不允许Javascript。
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-08-22 00:35:29
本质上，您可以将底部属性设置为页脚的高度，并将溢出属性设置为auto，以便在必要时添加滚动条，这将防止其溢出。
例如，
#content {
position: absolute;
top: <height of header>px;
bottom: <height of footer>px;
overflow: auto;
}下面是一个演示：http://jsfiddle.net/bYdgj/1/
Stack Overflow用户
发布于 2013-08-22 00:29:18
如果您绝对定位页眉和页脚，那么您应该能够将内容div的高度和宽度设置为100%。确保将内容div的位置设置为相对位置。
Stack Overflow用户
发布于 2013-08-22 00:31:31
页眉和页脚是否总是位于屏幕的那个位置？
如果是，则可以为css使用职位:固定；属性。这样你就可以将你的页眉和页脚锚定在窗口屏幕上。
如果主div正在覆盖它们，则在其上抛出一个z索引和主内容div (确保主内容具有比页眉和页脚更小的位置属性和z索引)。
这样做之后，您可以在主内容div上抛出页边距，以确保它保持在页眉/页脚之间。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18369790
复制相关文章
相似问题
腾讯云开发者
