How to know screen's height? for Loading screen

Question

I'm making Loading screen , It works well until page's height is more than 100% ,

Css

.Loading {
  position: absolute;
  left: 0;
  top:0;
  background-color: #141414;
  width: 100%;
  height: 100%;
  z-index: 1;
 }

How to detect the actual height of all screen? or what is the best way to make loading screen?

Jquery //If required

$(document).ready(function(){
  RemoveLoader(); 
});

function RemoveLoader(){
  $(".Loading").animate({opacity:"0"},"slow",function(){
     $(".Loading").remove();
   });
 }

Or searching a solution via jquery [https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window](https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window) — Sfili_81, Sep 11 '19 at 07:22
Since it's a loading screen, you can use `position:fixed` instead of absolute. — Sagar V, Sep 11 '19 at 07:29

score 1 · Accepted Answer · answered Sep 11 '19 at 07:28

ya there is an option to remove scroll bar from you page.

you can define overflow:hidden; in body by default and when you remove your loader also remove body style attribute.

the demo is in snippet you can check.

$(document).ready(function(){
  RemoveLoader(); 
});

function RemoveLoader(){
  $(".Loading").animate({opacity:"0"},"slow",function(){
   $(".Loading").remove();
   $('body').removeAttr('style');
 });
}

.Loading{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: gray;
}

<body style="overflow: hidden;">
  <div class="Loading"></div>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <p>your content</p>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>

Thank You...

score 0 · Answer 2 · answered Sep 11 '19 at 08:32

0

I learnt this css hack a little while ago.

You can use VH and VW as measurements:

width: 100vw; height: 100vh;

answered Sep 11 '19 at 08:32

Josh Whiddett

39
10

How to know screen's height? for Loading screen

2 Answers2