Question

我的问题是如何让横幅成为视口100%，同时保持其他所有内容。

现在我正在尝试使用Skeleton框架来使用其预先制作的@media解决方案和网格系统。我注意到因为它是一个960网格系统我不能在其中放置一个横幅，它将转到视口的100%（因为它仅限于960px）。

我想要一个允许我继续使用Skeleton框架的解决方案，我可以像this site这样的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>

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

1 个答案:

实施例