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

I am using bootstrap to preview the mobile device as follows:
enter image description here

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

My HTML/CSS code is as follows:

.frame {
  border-radius: 15px;
  background-color: #b3b6b9;
  height: 400px;
  padding: 50px 10px 75px 10px;
}

.screen {
  border-radius: 10px;
  background-color: #ffffff;
  height: -webkit-fill-available;
  padding: 20px 15px 150px 15px;
  
}
.circle {
  border: 1px solid;
  border-color: #ffffff;
  border-radius: 50px;
  height: 50px;
  width: 50px;
  margin: 10px auto;
  position: relative;
}
.preview {
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -webkit-border-bottom-right-radius: 25px;
  -webkit-border-bottom-left-radius: 0px;

  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  -moz-border-radius-bottomright: 25px;
  -moz-border-radius-bottomleft: 0px;

  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 0px;
  background-color: #dee0e2;
  height: -webkit-fill-available;
}
<div class="col-4">
      <div class="row">
        <div class="col-12">
          <p>Preview</p>
          <div class="frame">
            <div class="screen">
              <div class="preview"></div>
            </div>
            <div class="circle">
              &nbsp;
            </div>
          </div>
        </div>
      </div>
    </div>

But the layout is not working fine in Edge. I guess there is something to do with the CSS statement height: -webkit-fill-available;

The layout of the mobile device in Edge is shown below for your reference. enter image description here

Notice that the preview div also not displayed in Edge:

htmlcssmicrosoft-edge


Solution 1:[1]

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;

Solution 2:[2]

Need to set the height:100% for .screen container. enter image description here

sample code

Solution 3:[3]

Use min-height for IE to fill the available space

 min-height: 100%; in IE

Solution 4:[4]

In my case, min-height did the trick

min-height: -moz-available;
min-height: -webkit-fill-available;
min-height: fill-available;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 leonheess
Solution 2
Solution 3 Rohinibabu
Solution 4 Hamed Navabian

Related Questions