gpt4 book ai didi

css - 在没有 vh 的情况下,在移动设备上安全地使用所有垂直空间减去 X 像素?

转载 作者:行者123 更新时间:2023-11-28 15:31:31 25 4
gpt4 key购买 nike

我们有一个应用程序需要在各种桌面和移动设备上运行。主要内容 div 的样式如下:

#map {
height: calc(100vh - 65px);
width: 100%;
}

在 iPad 和最近的移动版 Chrome 上,这个元素太高而无法显示在屏幕上,所以底部被切掉了。由于 this issue,它太高了工具栏的高度.

设置适用于所有浏览器的 div 高度的安全方法是什么?

最佳答案

这个有用吗?我检查了我的 iPad & 似乎表现为 100% 高度 - 65px。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAP 100% - 65px</title>
<style>
html, body
{
margin:0;
padding:0;
height:100%;
background:#666;
}

#map
{
height: calc(100% - 65px);
width: 100%; /*DON'T THINK THIS IS REQUIRED*/
background:#CCC;
}

h1
{
margin:0;
padding:15px;
}

</style>

</head>
<body>
<div id="map"><h1>My Map</h1></div>
</body>
</html>

Codepen

关于css - 在没有 vh 的情况下,在移动设备上安全地使用所有垂直空间减去 X 像素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44623110/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com