Question

我想让Div占据整个页面的高度。问题是，当我的页面滚动时，div没有采取整个高度只需要高度直到滚动。 div用于在加载时重叠页面。这是我的CSS代码：

#disablingDiv
{
 /* Do not display it on entry */
 display: block;

 /* Display it on the layer with index 1001.
   Make sure this is the highest z-index value
   used by layers on that page */
 z-index:1001;

 /* make it cover the whole screen */
 position: absolute;
 top: 0%;
 left: 0%;
 width: 100%;

 min-height:100%;

 /* make it white but fully transparent */
 background-color: gray;
 opacity:.5;
}

这是我的HTML代码：

<!DOCTYPE html>
<html ng-app="app">

 <head>
  <title ng-bind="title">
    My app
  </title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <base href="/">    
 </head>
 <body>
  <div id="disablingDiv"></div>
  <ui-view></ui-view>
 </body>    
</html>

提前致谢！

Answer 1

你想要某种叠加吗？如果是，您可能希望使用固定位置而不是绝对位置。与绝对位置不同，fixed将相对于视口（可见区域）定位元素。此外，您可能希望在叠加层处于活动状态时将“overflow：hidden”设置为滚动容器。

.loadingOverlay {
   position: fixed;
   z-index: 100;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   /* make it white but fully transparent */
   background-color: gray;
   opacity:.5;
}

.loadingContainer {
    /* do not allow scrolling */
    overflow: hidden !important;
}

另外，您可以围绕实际视图包装disablingDiv。如果您不想阻止整个页面而只是内容，同时仍然允许导航，例如，可能会很有用使用一些工具栏。

Answer 2

将position: absolute;更改为position: fixed;

＆＃13;

html,body {
  height: 3000px;
}

div {
  position: fixed;
  background: red;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

＆＃13;

<div></div>

＆＃13;

如果要加载，我会在加载html, body { overflow: none; }

时禁用滚动

Answer 3

使用固定位置而非绝对位置。

#disablingDiv
{
  position: fixed;
  height: 100%;
}

Answer 4

您是否尝试过将样式设置为html和body标签，如下所示？

html {
   height: 100%;
}
body {
   height: 100%;
}

编辑：

根据你的评论，我只是把你的代码放在一个jsfiddle中，它似乎达到你所要求的？如果没有，你能详细说明吗？你有什么尝试过的？

https://jsfiddle.net/qLxm7rbx/1/

Answer 5

添加以下代码并尝试：

#disablingDiv {
    height:100vh;
}

同时检查browser support。

或者：

body, html {
      height: 100%;
}

#disablingDiv {
      height: 100%;
}

页面滚动时，Div宽度为100％

5 个答案: