这还处于发展的早期阶段。我想要这个＆＃34;封面＆＃34;页面是不可滚动的，白色|黑色背景的高度调整到浏览器窗口的高度。目前，当缩小浏览器窗口的高度时，标题不会按比例向上移动并显示滚动条。我目前并不真正关心浏览器宽度，因为我还没有添加任何代码。
答案 0 :(得分：1)
我想我明白你的意思了 - 你希望<h1>和<h2>元素在调整视口高度时垂直移动，这样它们就不会从屏幕上移开（当它变得太短时）并创建一个滚动条。
在您当前的CSS中，您尝试使用margin-top:17%上的<header>执行此操作。这似乎是一种逻辑方法，除了好奇的事情发生：margin-top永远不会改变，无论你如何垂直调整浏览器的大小。
我说实话，这让我困扰了一段时间，所以我做了一些关于保证金行为的搜索，发现了this critical piece of information：＆＃34;这个百分比是根据生成的框的宽度包含块。＆＃34; 因此在计算中完全忽略浏览器高度！如果您调整浏览器的宽度，您实际上可以看到标题在网页上的上下移动方式。
嗯，这完全无效使用百分比边距来尝试相对于视口高度垂直对齐<header>。现在怎么办？实际上，许多其他开发人员已经以各种方式解决了元素的垂直对齐问题。这是一个使用绝对定位的简单方法，仅重写<header>的样式：
header {
margin-top:-3em;
position:absolute;
width:100%;
top:50%;
}
这是这个新CSS的JSFiddle demonstration。请注意，margin-top:-3em;有点猜测（一半）标题的高度，所以如果您不想对该值进行硬编码，那么您可能需要查看垂直对齐的不同方法（这只是最简单的方法之一）。另外，如果您不希望它垂直居中，只需将top:50%;更改为不同的百分比值。
希望这有帮助！如果您有任何问题，请告诉我。