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!
Aucun commentaire:
Enregistrer un commentaire