代码之家 › 专栏 › 技术社区 › wezten

当地址栏被隐藏时,为什么html{height:100%}不起作用?

mobile html android

wezten · 技术社区 · 3 年前

我有以下html:

<html style="height:2000px">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html { height: 100%; background: orange; }
        body { height: 100%; background: green; position: relative; }
        #b { position: absolute; bottom: 0 }
    </style>
</head>
<body>
    <button type="button" id="b">click me</button>
    <script>
        document.getElementById('b').onclick = 
            () => document.documentElement.style.height = null;
    </script>
</body>
</html>

我上传到 this link 。在Android上的Chrome或Opera中打开它。向下滚动到“点击我”按钮,确保地址栏在向下滚动时被隐藏,然后点击它。你应该得到:

这有什么意义?为什么它一路都不是绿色的?

0 回复 | 直到 3 年前

wezten 3 年前

https://developers.google.com/web/updates/2016/12/url-bar-resizing 解释说 height:100% 在…上 <html> 使其具有与ICB(初始包含块)相同的高度,并且ICB的高度是“尽可能小的视口”,即显示地址栏的高度。即使地址栏被隐藏,洲际弹道导弹的高度也不会改变,这解释了我屏幕截图底部所有的橙色。

当地址栏被隐藏时,使用“100vh”可以获得视口高度,当地址栏变为可见时,视口高度也不会改变。

因此,如果您希望高度适应地址栏是否可见,则必须使用JS。

推荐文章

Softly · 单选按钮未按预期取值

1 年前