How to use height: -webkit-fill-available in Edge browser? How to make a div fill the available space in Edge?

Question

I am using bootstrap to preview the mobile device as follows:

It works perfectly fine in Chrome. But not on edge :(

My HTML/CSS code is as follows:

Answer 1

Need to set the height:100% for .screen container.

sample code

Answer 2

I think you can simply declare height twice:

height: 100%;
height: -moz-available;          /* WebKit-based browsers will ignore this. */
height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
height: fill-available;

Answer 3

Use min-height for IE to fill the available space

 min-height: 100%; in IE