Div 100%高度滚动

Question

在我的页面上，我有一个位于左侧的导航栏，高度为100%，宽度为25%。它运行良好，但当滚动可用时，它会破坏背景并使其看起来很丑。我认为原因是100%高度仅适用于活动窗口。如何让div始终具有100%的高度，即使用户在滚动？

导航的CSS：

    width:25%;
    height:100%;
    float:left;
    color:#999999;

我尝试使用position:absolute，但没有结果，也尝试了clear both。 需要帮助 :) Fiddle

- simon

Answer 1

使用min-height: 100%代替height: 100%应该可以解决此问题。查看更新的示例：http://jsfiddle.net/zitrusfrisch/Sa6cb/3/

- Daniel Riemer

---

这似乎是有效的，但当我这样做时，我失去了侧边栏的滚动条，而这是我想保留的东西。有人对此有什么想法吗？ - Paul Samsotha

我想我们永远不会知道。 - Denny

当内容超出视口的高度时，将min-height: 100%和height: auto设置为我的解决方案。 - larrydalmeida

Answer 2

如果你想要元素占满整个屏幕，使用 min-height: 100vh；如果你想要元素占满父元素的空间，使用min-height: 100%。

- Alex Quintero

---

谢谢！我已经搜索了一段时间，vh单位给了我所需的东西！ - stsmurf

Answer 3

我更喜欢使用:

   height: 100%;
   overflow: auto;

- Si Thu

Answer 4

当我想在网页上建立一个不透明的覆盖层时，我遇到了类似的问题。这个覆盖层只覆盖了浏览器窗口的高度，而不是整个页面的滚动高度。我使用JavaScript动态获取页面高度来解决这个问题。

$('body').append('<div style="width:100%;height:'+document.documentElement.scrollHeight+'px;background:#000000;opacity:0.5;position: absolute;top: 0;z-index: 1000;"></div>')

- Akan Udoeyop