css - -moz-available 高度在 Firefox 中不起作用
问题描述
我使用 chrome 中可用的填充,它工作得很好,但在 Firefox 中却没有。这是小提琴:小提琴 为什么不起作用?请帮忙。
.container {
background: steelblue;
height: 100%;
height: -moz-available; /* WebKit-based browsers will ignore this. */
height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
height: fill-available;
width: 100%;
width: -moz-available; /* WebKit-based browsers will ignore this. */
width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
width: fill-available;
}
解决方案
对于 Firefox,您必须为 body 和 html 元素设置 height:'100%' ,如下所示:
html, body {
height: 100%;
}
.container {
height: 100%;
min-height: -moz-available; /* WebKit-based browsers will ignore this. */
min-height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
min-height: fill-available;
}
这对我有用。我希望这可以帮助你。
推荐阅读
- spring-boot - 如何运行 mySQL 脚本进行云构建
- javascript - 我在 Reactjs 中使用谷歌地图而不使用任何库
- java - Joda time plusDays 日期错误
- xml - Supernova 没有在 Android XML 的试用版中生成正确设计的 adobe XD 文件?
- javascript - 如果每个记录都包含 nodejs 和 mongoose 中的值,则查找记录列表
- json - 在 swift 5 中解析 json 我没有数据
- python - 如何使用带有 azureml-dataprep 的 WITH 子句运行 SQL 查询?
- performance - 如何为 elasticsearch 模拟繁重的磁盘 / io 负载
- python - 如何查看插入到文本框中的不断更新的变量的变化
- flutter - 使用 Streams 的 Flutter API 请求 - 元素太多