Windows flexbox高度或大图像背景_Windows_Height_Flexbox

Windows flexbox高度或大图像背景

windows

Windows flexbox高度或大图像背景,windows,height,flexbox,Windows,Height,Flexbox,我真的很喜欢这种大img背景的方法，但我希望它也能与windows的高度保持一致（在我们向下滚动到其他部分或分区之前），所以在到达移动屏幕之前，它的高度可以一直延伸并填充整个浏览器屏幕，而内部的徽标和内容始终位于中间我喜欢这个网站，我发电子邮件询问，但从来没有得到任何关于如何制作它的回复，我尝试跟随它的css，但我只是不能将我的标题作为它的标题，我真的没有看到任何其他flexbox css除了div.hero-content，是的，我是flexbox的新手，它有javascript还是什么您

我真的很喜欢这种大img背景的方法，但我希望它也能与windows的高度保持一致（在我们向下滚动到其他部分或分区之前），所以在到达移动屏幕之前，它的高度可以一直延伸并填充整个浏览器屏幕，而内部的徽标和内容始终位于中间

我喜欢这个网站，我发电子邮件询问，但从来没有得到任何关于如何制作它的回复，我尝试跟随它的css，但我只是不能将我的标题作为它的标题，我真的没有看到任何其他flexbox css除了div.hero-content，是的，我是flexbox的新手，它有javascript还是什么

您能帮助我吗？

要使用flex box创建一个div填充站点，您需要执行以下操作：

<body>
    <div id="mainWrapper">
        <div id="headerWrapper">
        <!-- HEADER CONTENT HERE -->
        </div>
    </div>
</body>

看一个实际的例子

然而，在这个特定的环境中，您不一定需要flexbox，因为

#mainWrapper

已经覆盖了整个站点。
虽然flexbox很好，但不要因为它是新的就强行使用它。摆脱flexbox和

#HeaderRapper

不会有任何伤害

请注意，我没有在这里包含任何供应商前缀，因此它可能无法在所有浏览器中正常工作。我建议您在部署CSS之前使用autoprefixer之类的工具。

请您更详细地说明所需的行为，并提供标记和CSS示例，说明您迄今为止所做的尝试。感谢上帝将您带到这里！我成功了！这就是为什么我不能全屏显示（我的页眉或页面的第一个div），我从来没有想过我需要设置html和正文的宽度和高度

html, body {
     margin: 0;
     padding: 0;
     height: 100%;
}

#mainWrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#headerWrapper {
    flex: 1;
}