我尝试用header、main和footer来创建一个简单的垂直布局结构。由于某种原因，main并没有填充header和footer之间的剩余空间，而是变得比预期的要高，并迫使主体滚动。
当使用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{
}
}字符串
超文本标记语言：
<!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>型
1条答案
按热度按时间pod7payv1#
好吧，所以这真的很烦人.但其他人看这里可能会有所帮助.这不是任何上述代码.这原来是一个问题与Chrome的开发工具.经过一段时间的斗争这件事，我关闭了开发工具，并打开他们回来，它的工作.什么痛苦！