flexbox 高度或大图像背景

Question

我真的很喜欢这种大 img 背景的方法，但我希望它也能随 windows 的高度变化（在我们向下滚动到其他部分或 div 之前） , 所以在到达手机屏幕之前，它的高度总是可以拉伸并填满整个浏览器屏幕，而里面的标志和内容总是在中间

我喜欢这个网站，http://peterfinlan.com/，我发邮件询问但从未收到任何关于如何制作的回复，我尝试关注它 css，但我就是无法制作我的 header 作为它，我真的没有看到任何其他 flexbox css 除了 div.hero-content，是的我是 flexbox 的新手，它有 javascript 还是什么？

你能帮帮我吗？

Answer 1

要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。

但是，在这个特定的上下文中，您不一定需要 flexbox，因为 #mainWrapper 已经覆盖了整个站点。
虽然 flexbox 很好，但不要因为它是新的就强行使用它。摆脱 flexbox 和 #headerWrapper 在这里不会造成任何伤害。

请注意，我没有在此处包含任何供应商前缀，因此它可能无法在所有浏览器中正常工作。我建议您在部署 CSS.

之前使用像 autoprefixer 这样的工具

flexbox 高度或大图像背景

flexbox height or big image background

windows

height

flexbox