大佬教程收集整理的这篇文章主要介绍了移动浏览器在使用 100vh 时错误地设置了最大高度，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个相当复杂的 HTML 结构，它必须适应多种设备，并且必须具有响应性。我已经包含了基本的 HTML 和样式作为示例。
我有一个包含某些区域的屏幕 - 标题、一些表单和一些带有按钮的内容。带有按钮的内容可以动态调整大小以扩展项目列表。 我需要设置此项目列表的最大高度，使其不会垂直溢出屏幕底部边缘。
相关 CSS 定义在 #info-panel__List 中：
#info-panel__List {
height: 100%;
max-height: calc(
100vh
- var(--header-height)
- var(--calculated-information-height)
- var(--control-height)
);
wIDth: 100%;
overflow: auto;
}
<!DOCTYPE HTML>
<HTML>
<head>
<Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0,user-scalable=yes" />
<style>
:root {
--header-height: 56px;
--control-height: 50px;
--control-panel-height: 106px;
--information-form-height: 62px;
--calculated-information-height: calc(
var(--control-panel-height)
+ var(--information-form-height)
);
}
HTML,body {
height: 100%;
margin: 0;
padding: 0;
}
HTML {
Font-size: 16px;
Font-family: Arial,Arial,sans-serif;
}
#root {
height: 100%;
wIDth: 100%;
BACkground-color: salmon;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#navigation {
height: var(--header-height);
wIDth: 100%;
BACkground-color: gold;
}
#information {
display: flex;
flex-direction: column;
wIDth: 100%;
align-items: center;
}
.row {
display: flex;
wIDth: 100%;
}
#information-form {
Box-sizing: border-Box;
padding: 10px;
height: 100%;
wIDth: 100%;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
#control-panel {
BACkground-color: darkslategray;
height: var(--control-panel-height);
wIDth: 100%;
position: relative;
}
#control-panel__content {
position: absolute;
left: 10px;
right: 10px;
margin-top: 80px;
}
#control-panel__control-buttons {
Box-sizing: border-Box;
height: var(--control-height);
BACkground-color: darkturquoise;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px;
border-radius: 10px;
}
.control-btn {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
color: darkslategray;
Font-weight: 700;
BACkground-color: white;
border: 2px solID darkslategray;
border-radius: 10px;
padding: 6px 18px;
}
#info-panel {
wIDth: 100%;
height: 100%;
display: none;
padding: 10px;
BACkground-color: white;
Box-sizing: border-Box;
}
#info-panel__List {
height: 100%;
max-height: calc(
100vh
- var(--header-height)
- var(--calculated-information-height)
- var(--control-height)
);
wIDth: 100%;
overflow: auto;
}
#info-panel.expanded {
display: flex;
}
.info-panel__List-item {
Box-sizing: border-Box;
height: 32px;
wIDth: 100%;
margin-bottom: 10px;
BACkground: thistle;
}
#map {
flex: 1;
display: flex;
wIDth: 100%;
height: 100%;
BACkground-color: Lightcyan;
align-items: stretch;
}
#map-contents {
flex: 1;
height: 100%;
min-height: 100%;
}
</style>
</head>
<body>
<div ID="root">
<header ID="navigation">
</header>
<div ID="information">
<form ID="information-form">
<div class="row">
<input type="text" placeholder="Info 1" />
</div>
<div class="row">
<input type="text" placeholder="Info 1" />
<button type="submit">Ok</button>
</div>
</form>
<div ID="control-panel">
<div ID="control-panel__content">
<div ID="control-panel__control-buttons">
<button type="button" class="control-btn">Ctrl 1</button>
<button type="button" class="control-btn">Ctrl 2</button>
<button type="button" class="control-btn">Ctrl 3</button>
</div>
<div ID="info-panel">
<div ID="info-panel__List">
<div class="info-panel__List-item"></div>
<div class="info-panel__List-item"></div>
<div class="info-panel__List-item"></div>
<div class="info-panel__List-item"></div>
<div class="info-panel__List-item"></div>
<div class="info-panel__List-item"></div>
<div class="info-panel__List-item"></div>
<div class="info-panel__List-item"></div>
<div class="info-panel__List-item"></div>
<div class="info-panel__List-item"></div>
<div class="info-panel__List-item"></div>
<div class="info-panel__List-item"></div>
<div class="info-panel__List-item"></div>
</div>
</div>
</div>
</div>
</div>
<div ID="map">
</div>
</div>
<script>
const handleInfoPanelToggle = (button) => {
const infoPanel = document.getElementByID('info-panel')
infoPanel.classList.toggle('expanded')
}
document.addEventListener('DOMContentLoaded',() => {
const controlbuttons = document.querySELEctorAll('.control-btn')
controlbuttons.forEach((button) => button.addEventListener('click',handleInfoPanelTogglE))
})
</script>
</body>
</HTML>
我已将所有顶部区域的高度定义为 CSS 变量，因此我可以使用 calc 获取列表的最大高度。这在 Chrome 上的开发过程中效果很好，但在 AndroID 和 iOS 上，列表会扩展到窗口的底部边缘。您可以在此屏幕截图中看到在 iOS 底部边缘下方扩大的白色区域：
在以下屏幕截图中，您可以看到 Chrome 在项目列表未溢出屏幕底部边缘的情况下正确渲染它：
我相信这是由于 vh 单位被解释的原因。在我看来，它正在考虑浏览器 UI 导航高度。当我尝试用通过 JavaScript 100vh 检索到的值替换 window.innerHeight 时，它按预期工作。
不幸的是，我很难通过 JavaScript 设置高度，因为真实的应用程序使用了很多 CSS 变量，而且很多都在使用 calc，因此无法检索像素值（除非我想在我不想要的 Js 中模拟 CSS 计算）。
是否有其他解决方案？我想避免使用绝对定位。
我想我已经想出了一个解决方案。 After reading this article on CSS tricks 我最终结合了 JavaScript 和 CSS 方法，它似乎正确设置了最大高度。
诀窍是在页面加载后获取实际可用的视口高度：
document.addEventListener('DOMContentLoaded',() => {
document.documentElement.style.setProperty('--vh',`${viewportHeight * 0.01}px`)
})
这将创建 --vh 变量，该变量具有从 JavaScript 计算出的 1vh 值。这样，它会为不包含浏览器 UI 的移动浏览器设置正确的 vh 值。
然后我只是更改 #info-panel__list CSS 定义以使用这个新变量而不是 100vh 像这样：
#info-panel__list {
height: 100%;
max-height: calc(
calc(var(--vh) * 100) /* <-- use the new variable */
- var(--header-height)
- var(--calculated-information-height)
- var(--control-height)
);
width: 100%;
overflow: auto;
}
以上是大佬教程为你收集整理的移动浏览器在使用 100vh 时错误地设置了最大高度全部内容，希望文章能够帮你解决移动浏览器在使用 100vh 时错误地设置了最大高度所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。