Question

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

导航的Css：

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

我尝试过的位置：绝对没有结果，也试过清楚。需要帮助：）

Fiddle

Answer 1

使用min-height: 100%代替height: 100%应该修复它。请在此处查看更新的小提琴：http://jsfiddle.net/zitrusfrisch/Sa6cb/3/

Answer 2

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

Answer 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>')

Div 100％高度滚动

3 个答案: