如何在Edge浏览器中使用height: -webkit-fill-available？如何让div填充Edge中的可用空间？

Question

我正在使用 bootstrap 预览移动设备，如下所示：

它在 Chrome 中工作得很好。但不在边缘:(

我的 HTML/CSS 代码如下：

 .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>

但是布局在 Edge 中运行不正常。我猜想这与 CSS 语句 height: -webkit-fill-available; 有关。

移动设备在 Edge 中的布局如下图所示，供您参考。

请注意，预览 div 也未显示在 Edge 中：

原文由 Rajesh MG 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您可以简单地声明两次高度：

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

原文由 mansoureh.hedayat 发布，翻译遵循 CC BY-SA 4.0 许可协议