显示地址栏时100vh的高度-Chrome移动
Tob*_*aus 16 html css address-bar google-chrome mobile-chrome
我几次遇到这个问题，想知道是否有解决这个问题的方法。我的问题发生在Chrome移动应用上。在那里，您可以向下滚动一点，地址栏消失。到目前为止，很好，让我们举一个例子：
容器height设置为100vh。
如您所见，底部被切除。
当我向下滚动时，它看起来像这样：
现在看起来不错。因此，很明显，Chrome将地址栏的高度计算为视口高度。所以我的问题是：
有没有办法，不管有没有地址栏，它看起来都一样？这样容器会膨胀吗？
Art*_*tru 92
2023 年更新
所有现代浏览器都支持CSSdvh单位（动态视图高度）。
100dvh等于可见区域的 100% 高度，并在移动浏览器页眉或页脚可见性切换时动态更改。
大、小和动态视口单位文章提供了更多详细信息，@jwseph 在答案中正确提到了它。
使用模态窗口和电话输入来测试移动键盘的示例：
* {
box-sizing: border-box;
}
html, body {
margin: 0;
}
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh; /* old browsers */
height: 100dvh; /* new browsers */
width: 100%;
padding: 16px;
}
.modal__container {
display: grid;
grid-template-rows: 1fr auto;
background: #2a9efa;
height: 100%;
}
.modal__content {
margin: 16px 0 0 16px;
padding-right: 16px;
height: 100%;
overflow-y: scroll;
}
.modal__footer {
padding: 8px 24px;
background: black;
}
.long-text {
min-height: 1800px;
background: yellow;
}<div class="modal">
<div class="modal__container">
<div class="modal__content">
<label>Phone:</label>
<input type="tel" placeholder="+1 000">
<p class="long-text">Long text</p>
</div>
<div class="modal__footer">
<button>Close</button>
</div>
</div>
</div>之前的回答
从开发人员的角度来看，对于浏览器应如何处理顶部、底部和侧面板的移动，社区仍然没有严格的一致意见。
问题中提到的问题是众所周知的：
这一切都始于Apple Webkit 问题。问题之一是网站开发人员用于
vh计算字体大小（calc(100 / vh * some)）。如果 100vh 是动态的，那么当用户向下滚动并且地址栏被隐藏时，字体大小与任何其他绑定元素一样都会扭曲，从而产生非常糟糕的用户体验，更不用说 CPU/GPU 密集型任务了。
苹果的决定是不断地将更大尺寸的屏幕（没有地址栏）匹配到100vh。因此，当显示地址栏并且您使用100vh高度时，底部将超出屏幕。许多开发人员不同意该决定，并认为视口单位是动态的并且完全等于可见的“视口”。Google Chrome 团队决定与 Apple 浏览器兼容，并坚持同样的决定。
height: 100%在大多数现代浏览器中等于实际可见部分，即高度会变化并取决于滚动期间地址栏是可见还是隐藏。栏不仅可以出现在屏幕顶部，还可以出现在底部（现代 iOS），并且屏幕键盘可以使视图更短。有一个很好的演示可以检查移动设备的实际大小
100vh vs 100%。
解决方案1
html, body { height: 100%; }
.footer-element {
position: fixed;
bottom: 10px;
}
解决方案 2
补偿对 的一些依赖性，使vh可见条高度等于“100vh - 100%”，当条隐藏时，差值将为 0。
html, body { height: 100vh; }
.footer-element {
position: fixed;
bottom: calc(10px + (100vh - 100%));
}
- 请注意，打开移动键盘时，移动操作系统有不同的行为。上述解决方案不涵盖该主题。 (3认同)
Ros*_*ght 71
根据Chrome web 上的这篇官方文章，设置高度以填充可见视口的正确方法是使用height: 100%，无论是在<html>元素上还是在position: fixed元素上。正如文档所述，这确保了与移动 Safari 的兼容性，并且与 URL 栏的大小无关。
- 需要注意的是，如果您仍然希望能够促进地址栏可见性的滚动切换，则“<html>”的高度仍应设置为“100vh”（或大于 100% 的值），并且仅目标填充元素应分配为“position:fixed;” 高度：100%`。 (4认同)
- 非常感谢。这篇文章实际上帮助我了解了幕后发生的事情。所以对于我的用例来说，100% 似乎是正确的，因为无论如何它都是一个“position:fixed”元素。 (3认同)
- 我也有同样的问题，但是将高度设置为 100% 并不能解决问题。 (3认同)
jws*_*eph 20
现在有三个新的视口单元：
sv*- 尽可能小的视口，没有地址栏的尺寸lv*- 最大可能的视口，尺寸包括地址栏dv*- 动态视口，大小取决于地址栏是否可见
用法
由于您希望容器的大小根据地址栏是否可见而变化，因此您想要的单位是dvh。
.container {
height: 100dvh;
}
希望这有帮助！
进一步阅读
Mah*_*our 15
.my-element {\n height: 100vh; /* Fallback for browsers that do not support Custom Properties */\n height: calc(var(--vh, 1vh) * 100);\n}\n现在让\xe2\x80\x99s 在 JavaScript 中获取视口的内部高度：
\n// First we get the viewport height and we multiple it by 1% to get a value for a vh unit\nlet vh = window.innerHeight * 0.01;\n// Then we set the value in the --vh custom property to the root of the document\ndocument.documentElement.style.setProperty(\'--vh\', `${vh}px`);\n来源：https ://css-tricks.com/the-trick-to-viewport-units-on-mobile/
\n小智 7
您可以通过设置 height: 100% on html 和 body 标签来修复地址栏问题，当然将 body 的边距和填充设置为零，您还可以处理主 div 中的滚动以更好地控制
- 您可以添加 `box-sizing: border-box;`，而不是将边距/填充设置为零 (2认同)
小智 5
我遇到了类似的问题，并在 ReactJS 中使用了这个解决方案：
import { useLayoutEffect, useState } from 'react';
function useWindowSize() {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
return size;
}
该useWindowSize函数取自使用React 调整浏览器大小的重新渲染视图。
当我在代码中使用它时，它看起来像这样：
const MessageList = () => {
const { messages } = useContext(ChatContext);
const [, windowHeight] = useWindowSize();
return (
<div
className="messages"
style={{
height: windowHeight - 80 - 48, // window - message form - navbar
}}
>
{messages.map((m, i, list) => ( <Message ... /> )}
</div>
);
};
- 虽然这可能是一个解决方案，但我否决了它，因为你的答案需要安装和使用 React，这会打开一个全新的蠕虫罐。 (3认同)
| 归档时间： |
|
| 查看次数： |
6619 次 |
| 最近记录： |