Question

我实际上非常喜欢这种方法，这是一个很大的img背景，但我希望它与Windows的高度一样流畅（在我们向下滚动到其他部分或div之前），所以在到达移动屏幕之前，它高度可以随时拉伸和填充整个浏览器屏幕，同时徽标＆amp;里面的内容总是在中间

我喜欢这个网站，http://peterfinlan.com/，我通过电子邮件发送询问，但从未得到任何关于如何制作它的回应，我试着按照它的css，但我只是不能让我的标题作为它，我真的没看到除div.hero-content之外的任何其他flexbox css，是的我是flexbox的新手，它有javascript还是什么？

你可以帮帮我吗？

Answer 1

要使用弹性框填充网站，您需要执行以下操作：

<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之类的工具。

flexbox高度或大图像背景

1 个答案: