Div 100% 高度滚动

Posted 2023-03-06

【中文标题】Div 100% 高度滚动

【英文标题】：Div 100% height scroll

【发布时间】：2013-11-14 11:52:38

【问题描述】：

在我的页面上，左侧有一个导航栏，其高度为 100%，宽度为 25%。 它工作正常，但是当有可用的滚动时，它会破坏背景，并使其看起来很难看。我认为的原因是 100% 高度仅适用于活动窗口。 即使用户正在滚动，让 div 始终保持 100% 高度的诀窍是什么？

导航的CSS：

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

我试过 position:absolute 没有结果，也试过 clear 两者。 需要帮助:)

Fiddle

【参考方案1】：

使用min-height: 100% 而不是height: 100% 应该可以解决它。在此处查看更新的小提琴：http://jsfiddle.net/zitrusfrisch/Sa6cb/3/

【讨论】：

这似乎可行，但是当我这样做时，我失去了 sidenav 上的滚动，这是我希望保留的。有人对此有任何想法吗？

我想我们永远不会知道

当内容超过视口高度时，设置 min-height: 100% 和 height: auto 对我有用。

【参考方案2】：

如果您希望元素占据 100% 的屏幕，请使用 min-height: 100vh 如果您希望它占用 100% 的父元素，请使用 min-height: 100%

【参考方案3】：

当我想在网页顶部构建一个不透明的叠加层时，我遇到了类似的问题。覆盖仅覆盖浏览器窗口的高度，而不是页面的总滚动高度。我转向 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>')

【参考方案4】：

我宁愿使用：

   height: 100%;
   overflow: auto;