100% 高度 div 不是 100%答案

【问题标题】：100% height divs not at 100%100% 高度 div 不是 100%
【发布时间】：2012-05-25 03:53:53
【问题描述】：

我在这个网站上工作：www.lumn.net。中心面板 (#overall) 应该是一个从页面顶部延伸到底部的 div。出于某种原因，我无法弄清楚，我在每一页的底部都有空间。 ~~更奇怪的是，只有两个页面，lumn.net/index.shtml 和 lumn.net/about.shtml，顶部和底部都有空间。~~

html 和 body 都有 height:100%。

如果我将中心面板的高度设置为 100%，则在仅在底部有额外空间的页面上，它会变为 600 像素，这是其内部 div 之一的最小高度，超出该高度的内容将耗尽底部。在顶部和底部都有额外空间的页面上，没有任何反应。

为中心面板设置 top:0 和 bottom:0 对任何页面都没有影响。

除了我已经尝试过的事情之外，我不知道自己做错了什么或如何解决它。

更新：底部空间的问题是由于我的页脚位于中心 div 之外，并使用负边距向上移动。然而，当我把它移到里面时，它下面还有一点奇怪的额外空间：lumn.net/about.shtml。我怎样才能将它正确地放在我的#overall center div 中？

【问题讨论】：

您能告诉我们更多细节吗？就像哪个 div 应该从上到下伸展一样。更好的是，在 jsfiddle.net 上发布代码（以及前面提到的细节）
本页右侧有不少相关文章。让 div 扩展 100% 的浏览器窗口是一个非常困难的过程，但这是一个有据可查的过程。尝试查看其中的几十个，如果仍然有问题，请回复:)
validator.w3.org/…

标签： css html stretching

【解决方案1】：

尝试更改 #overal 上的 padding-bottom：

padding-bottom: 18px

这能解决你的问题吗？

【讨论】：

确实如此，我刚刚发现了同样的问题——60px 底部填充是我之前错误尝试定位页脚时遗留下来的。

【解决方案2】：

在主页和关于页面上，您有一些奇怪的额外字符“？” 可能是一个 php 标签打开不好？

您是否尝试过在#overall 上设置 100% 的高度？（对我来说它有效......）

【讨论】：

对我来说，它会导致#overall 缩小到浏览器窗口的高度（加上它的填充）。
当我在#Overall 上设置 height:100% 时，我得到了与 Brilliand 相似的结果——但我不知道那在哪里？来自！它甚至在 doctype 声明之前就在我文件的顶部。

【解决方案3】：

您的页脚高度为 28 像素（包括边框），顶部为 -42 像素。这留下了 16px 的 #overall 突出在其下方 - 只有 8px 似乎是故意的。

至于页面顶部，这似乎是由一个无关的问号引起的（在页面的左上角几乎看不到）。

【讨论】：

哦，对了，当我将页脚移动到#overall（中心）div 中时，页脚做了一些非常奇怪的事情，背景与内容分离。我想我会把它放在#overall 外面并用边距向上移动来欺骗它，但没有意识到它会在底部留下额外的空间。
& 正如我上面所说，我不知道那些错误的 ?s 来自哪里——它们在 doctype 声明之前的这两个文件的开头。如果没有人指出，我不知道我要花多长时间才能看到它们。至少这很容易解决。