html - 如何使 "image banner"100% 的视口(viewport)没有边距，以及页面中心的其余部分

Question

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

现在我正在尝试使用骨架框架来使用其预制的 @media 解决方案和网格系统。我注意到因为它是一个 960 网格系统，所以我不能在其中放置一个横幅，它会到达视口(viewport)的 100%(因为它限制为 960px)。

我想要一个允许我继续使用 Skeleton 框架的解决方案，并且我可以解决 100% 视口(viewport)横幅，例如 this site举个例子。

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

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>