html - 如何使“图像横幅”100% 的视口没有边距和页面中心的其余部分

Question

我的问题是如何让横幅成为100%视口，同时保持其他一切居中。

现在我正在尝试使用 Skeleton 框架来使用它的预制@media解决方案和网格系统。我注意到因为它是一个 960 网格系统，所以我不能在里面放一个横幅，它会进入100%视口（因为它被限制在960px）。

我想要一个解决方案，它允许我继续使用 Skeleton 框架，并且我可以为像这个网站100%这样的视口横幅解决问题。

如果这是不可能的，那么我将需要有关实现此目标的最佳方法的指导。

Answer 1

如果我正确理解您的问题，这通常是通过横幅内的包装完成的。

例子：

HTML：

<div class="banner">
    <div class="wrapper">
        <h1>Example Title</h1>
    </div>
</div>

CSS：

.banner {
    background: url(/* Your image */) center center no-repeat;
    background-size: cover;
    height: /* Whatever height */;
}

.wrapper {
    margin: 0 auto; /* This is what centers it */
    max-width: 1000px;
    width: 96%;
 }

因此，您将在每个内容部分（页眉、主要、页脚等）中有单独的包装器。

要将它与 Skeleton 一起使用，它看起来像这样（在非常简短地查看了他们的文档之后）。

HTML：

<div class="banner">
    <div class="container"><!-- Your 960 grid -->
        <div class="six columns><!-- Or however much of your 960 you want it to take up-->
            <!-- Content -->
        </div>
    </div>
</div>