我试图开始工作的页面在这里。问题是我一直在为中间div指定一个特定的高度；连接的"；到上面的标题和下面的选择列表。它工作得很好，只是整个东西没有停留在窗户的高度。当我发现一个模拟器在改变我的屏幕分辨率时出现了问题。按照我的浏览器现在显示的方式，它只有窗口高度的2/3左右。此外，如果我在窗口上从最大值到最小值，那么高度就会超过窗口的底部。宽度还可以，但高度是个问题。
如果您查看页面并查看源代码，您可以看到我使用的是div，其中一个充当所有内容的容器，然后是标题栏的div，底部栏的div和内容的中心div。
你可以尝试这样的高度：
height: calc(100vh - 3.8rem);
尝试将高度更改为height: 90vh(或任何其他数字，由您决定(，vh是视口高度的1%
如果你的页眉和页脚是固定高度的，并且你希望页脚总是固定在底部，那么我认为你可以使用这样的绝对布局。
只需将页脚向下固定，并将内容设置为顶部/底部即可。不要将内容的高度设置为允许其填充页眉/页脚之间的空间。
body { margin: 0; height: 100vh; width: 100vw }
.header { height: 50px; background: blue }
.content { position: absolute; top: 50px; bottom: 50px; width: 100%; background: red }
.footer { position: absolute; bottom: 0; height: 50px; width: 100%; background: green }<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>你也可以在没有绝对定位的情况下进行，只需使用calc((来调整高度。对于任何一种解决方案，您都需要将容器(在本例中为主体(设置为用vh/vw填充屏幕。
body { margin: 0; height: 100vh; width: 100vw }
.header { height: 50px; background: blue }
.content { height: calc(100% - 100px); background: red }
.footer { height: 50px; background: green }<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>flexbox还有另一种方法，你不需要在页眉/页脚上有固定的高度——我可以用这个。。。
编辑：这将是我喜欢的方式，flexbox，这样你就不必担心页眉/页脚的高度，内容总是可以拉伸的。
body { margin: 0; height: 100vh; width: 100vw; display: flex; flex-direction: column }
.header { background: blue }
.content {
display: flex;
flex: 1 1 auto;
background: red;
}
.footer { background: green }<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer<br>With Line Break</div>尝试height:67vh;高度将保留视口高度的三分之二！
请使用css媒体查询获得特定高度。或者，你可以用rem设置高度。因为如果你把它放在rem上，即使屏幕不同，它也会得到优化。