我正在尝试制作一个带有页眉、主要和页脚部分的简单垂直布局结构。由于某种原因，它不是主要填充页眉和页脚之间的剩余空间，而是变得比预期更高并迫使正文滚动。
当使用 Chrome 的开发工具将屏幕尺寸设置为 iPhone 12 Pro (390px x 844px) 时，main 计算为 805.333px。当屏幕尺寸为 800px x 800px 时，main 的计算值为 761.333px。 #application 似乎运行良好。它保持正确的高度。
不确定我在这里缺少什么。
CSS：
html,
body{
width: 100%;
height: 100%;
}
body{
font-family: 'Roboto', serif;
font-size: 1rem;
margin: 0;
}
body,
body *{
box-sizing: border-box;
}
#application{
background-color: red;
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 100%;
header,
main,
footer{
flex-shrink: 0;
}
header,
footer{
//flex-shrink: 0;
}
header{
}
main{
flex-grow: 1;
overflow-y: scroll;
}
footer{
}
}
HTML：
<!doctype html>
<html>
<head>
<title>This is the title of the webpage!</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div id="application">
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
</div>
</body>
</html>
好吧，这真的很烦人。但其他人在这里查看可能会有所帮助......这不是上面的任何代码。事实证明这是 Chrome 开发工具的问题。在与这个问题斗争了一段时间后，我关闭了开发工具并重新打开它们，它起作用了。好痛苦啊！