Question

我在使用Mac版Safari内的CSS height: 100vh设计要求屏幕高度为100％的Web应用程序时遇到问题。

每次我打开新标签页并返回到Web应用程序标签页时，都不会调整大小，以考虑到由于标签页栏的原因，浏览器现在的空间减少了约24像素。

有什么想法可以解决这个问题？

代码示例：

HTML文件：

<html>
<head>
    <title>Safari Bug</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="app">
        <h1>Safari bug instructions</h1>
        <ol>
            <li>Close all tabs in Safari except this page. (You will see a dark bar at the bottom with buttons)</li>
            <li>Open a new tab.</li>
            <li>Return to the tab. (If the bug appear, you no longer will see the buttons withouth scrolling)</li>
        </ol>
        <p></p>
        <nav class="toolbar">
            <button>Button 1</button>
            <button>Button 2</button>
            <button>Button 3</button>
        </nav>
    </div>
</body>
</html>

CSS文件：

html,
body {
    margin: 0;
}
.app {
    position: relative;
    height: 100vh;
    background-color: lightgray;
}

.toolbar {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: grey;
}

已更新：添加了测试代码。当前发生在Mojave 10.14.3上的Safari 12.0.3

Safari for Mac标签页的菜单栏高度问题

0 个答案: