Responsive design 如何使页眉随着浏览器的高度而移动，而不是出现滚动条？

---

这正处于发展的早期阶段。我希望这个“封面”页面是不可滚动的，黑白背景的高度可以根据浏览器窗口的高度进行调整。此时，当降低浏览器窗口的高度时，标题不会按比例向上移动，并出现一个滚动条。我现在并不真正关心浏览器的宽度，因为我还没有为它添加任何代码。

我想我明白你的意思了-你希望

和

元素随着视口高度的调整而垂直移动，这样它们就不会离开屏幕（当屏幕太短时）并创建一个滚动条

在您当前的CSS中，您可以尝试使用

上的

边距顶部：17%

来执行此操作。这似乎是一种合乎逻辑的方法，但奇怪的事情发生了：无论您如何垂直调整浏览器的大小，

页边距顶部

都不会改变

老实说，这让我困惑了一段时间，所以我搜索了一些关于边距行为的信息，发现：“百分比是根据生成的框的包含块的宽度计算的。”因此在计算中完全忽略了浏览器高度！如果调整浏览器的宽度，实际上可以看到标题在网页上的上下移动

那么，使用百分比边距尝试相对于视口高度垂直对齐

完全无效。现在怎么办？元素的垂直对齐实际上是许多其他开发人员以各种方式解决的问题。这里有一个使用绝对定位的简单方法，只需重写

的样式：

下面是这个新CSS的一个示例。请注意，

页边距顶部：-3em

是对标题高度的一种猜测（一半），因此如果不想硬编码该值，您可能需要寻找一种不同的垂直对齐方法（这只是最简单的方法之一）。另外，如果您不希望它垂直居中，只需更改

top:50%设置为不同的百分比值

希望这有帮助！如果您有任何问题，请告诉我。
这是您在过去几天里第二次帮助我。你帮了大忙。你应该指导我，哈哈，没问题。这对我来说也很有趣，因为我学到了一些东西。
header {
  margin-top:-3em;
  position:absolute;
  width:100%;
  top:50%;
}