Div width 100% when page has scroll
Question
I am trying to make a Div take the whole height of a page. The problem is when my page has scroll the div is not taking whe whole height only takes the height until the scroll. The div is used to overlap the page when loading. Here is my CSS code:
#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;
}
And here my HTML code:
<!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>
Thanks in advance!
5 answers
solution1
1 ACCPTED 2017-03-17 09:34:57
Do you want to have some kind of overlay? If yes you may want to use position fixed instead of absolute. Unlike position absolute, fixed will position the element relative to the viewport (visible area). Additionally you may want to set "overflow: hidden" to the scrolling container while the overlay is active.
.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;
}
Alternativly you can wrap you disablingDiv around the actual view. Might be useful if you don't want to block the whole page but just the content while still allowing to navigate eg using some toolbar.
solution2
0 2017-03-17 09:28:20
Change position: absolute; to position: fixed;
html,body { height: 3000px; } div { position: fixed; background: red; top: 0; right: 0; bottom: 0; left: 0; }
<div></div>
If it's for loading, I would disable the scroll while it's loading with html, body { overflow: none; } html, body { overflow: none; }
solution3
0 2017-03-17 09:55:57
Use Position fixed instead of absolute.
#disablingDiv
{
position: fixed;
height: 100%;
}
solution4
-1 2017-03-17 09:25:13
Have you tried setting styles to html and body tags like below?
html {
height: 100%;
}
body {
height: 100%;
}
Edit:
As per your comment, I just put your code in a jsfiddle and it seems to achieve what you're asking for? If not can you elaborate please? What have you already tried?
solution5
-1 2017-03-17 09:26:50
Add below code and Try:
#disablingDiv {
height:100vh;
}
Also check browser support .
Or:
body, html {
height: 100%;
}
#disablingDiv {
height: 100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.