gpt4 book ai didi

html - 页面滚动时div宽度100%

转载 作者:行者123 更新时间:2023-11-28 15:16:27 24 4
gpt4 key购买 nike

我试图让一个 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>

提前致谢!

最佳答案

你想要某种叠加层吗?如果是,您可能希望使用固定位置而不是绝对位置。与 position absolute 不同,fixed 将相对于视口(viewport)(可见区域)定位元素。此外,您可能希望在覆盖处于事件状态时将“溢出:隐藏”设置为滚动容器。

.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 包裹在实际 View 周围。如果您不想屏蔽整个页面而只屏蔽内容,同时仍允许导航,例如使用一些工具栏。

关于html - 页面滚动时div宽度100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42853535/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com