37

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

导航的CSS：

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

我试过 position:absolute 没有结果，也试过 clear 。需要帮忙 ：）

小提琴

4

4 回答 4

66

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

于 2013-11-03T21:04:32.720 回答
2

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

于 2020-04-24T02:54:28.520 回答
0

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

于 2020-03-15T15:14:25.083 回答
0

我宁愿使用：

   height: 100%;
   overflow: auto;
于 2022-01-06T03:36:20.823 回答