我真的很喜欢这种大img背景的方法，但我希望它也能与窗口的高度保持一致（在我们向下滚动到其他部分或div之前），所以在到达移动屏幕之前，它的高度总是可以拉伸的并填充整个浏览器屏幕，而里面的徽标和内容始终位于中间
我喜欢这个网站，http://peterfinlan.com/，我通过电子邮件询问但从未收到有关如何制作它的任何回复，我尝试遵循它的 css，但我无法将我的标题设为它，我真的没有看到任何其他div.hero-content 以外的 flexbox css，是的，我是 flexbox 的新手，它有 javascript 还是什么？
你能帮帮我吗？
【问题讨论】：
要使 div 使用弹性框填充网站，您需要执行以下操作：
<body>
<div id="mainWrapper">
<div id="headerWrapper">
<!-- HEADER CONTENT HERE -->
</div>
</div>
</body>
使用以下 CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mainWrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#headerWrapper {
flex: 1;
}
查看示例here。
但是，在这种特殊情况下，您不一定需要弹性框，因为 #mainWrapper 已经覆盖了整个网站。
虽然 flexbox 很好，但不要仅仅因为它是新的就强制使用它。摆脱 flexbox 和 #headerWrapper 在这里不会造成任何伤害。
请注意，我没有在此处包含任何供应商前缀，因此它可能无法在所有浏览器中按原样工作。我建议您在部署 CSS 之前使用诸如 autoprefixer 之类的工具。
【讨论】：