如何使用高度:-webkit-fill-在Edge浏览器中可用?如何使div填充Edge中的可用空间? [英] How to use height: -webkit-fill-available in Edge browser? How to make a div fill the available space in Edge?
本文介绍了如何使用高度:-webkit-fill-在Edge浏览器中可用?如何使div填充Edge中的可用空间?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用引导程序来预览移动设备,如下所示:
I am using bootstrap to preview the mobile device as follows:
它在Chrome中运行良好.但不是在边缘:(
It works perfectly fine in Chrome. But not on edge :(
我的HTML/CSS代码如下:
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">
</div>
</div>
</div>
</div>
</div>
但是布局在Edge中无法正常工作.我想这与CSS语句的高度有关:-webkit-fill-available;
But the layout is not working fine in Edge. I guess there is something to do with the CSS statement height: -webkit-fill-available;
以下显示了Edge中移动设备的布局,以供您参考.
The layout of the mobile device in Edge is shown below for your reference.
请注意,预览div也未显示在Edge中:
Notice that the preview div also not displayed in Edge:
推荐答案
我认为您可以简单地声明两次高度:
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;
这篇关于如何使用高度:-webkit-fill-在Edge浏览器中可用?如何使div填充Edge中的可用空间?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文