html - 溢出：滚动和 100% 高度

Question

我需要里面有滚动的 DIV，它应该是浏览器视图的 100% 高度，还需要底部的另一个 DIV，位置绝对（固定不是一个选项）

这是可以做到的吗？

+-ooo----------------------------------+
|              Web Browser             |
+--------------------------------------+
|                                      |
|         BODY overflow:hidden         |
|                                      |
|                                      |
|       DIV WITH SCROLL INSIDE IT      |
|        height:100% (of window)       |
|           overflow: scroll           |
|                                      |
|                                      |
|                                      |  
+--------------------------------------+
|         Fixed DIV height:50px        |
+--------------------------------------+

Answer 1

我认为如果您将该 div 放在底部，它可能会出现在主要内容区域的上方。

不过，您可以使用此 CSS 实现 100% 的高度：

html, body, #content_div
{
    height: 100%;
}

然后在内容 div 上设置溢出。棘手的部分是让底部的固定 div 不重叠。以跨浏览器方式获得它的唯一方法是使用 Javascript 在开始时检测可用窗口的高度，从中减去 50px，然后在内容 div 上设置该高度。您可能还需要在其中添加一个 onresize 事件处理程序来处理用户调整浏览器窗口大小的情况。