使用 grid 960 时，我还能有 100% 宽度的标题部分吗？答案

【问题标题】：When using grid 960, can I still have a 100% width header section?使用 grid 960 时，我还能有 100% 宽度的标题部分吗？
【发布时间】：2011-04-23 21:09:00
【问题描述】：

我想使用网格系统，比如网格 960。

但是我希望网站的顶部标题是 100%，这还有可能吗？

【问题讨论】：

标签： css 960.gs

【解决方案1】：

当然...只需手动将顶部设置为 100%。

【讨论】：

【解决方案2】：

是的。您可以将标题与主要内容分开，例如：

<body>
    <div class="header" style="width:100%;"></div>
    <div class="mainWrapper container_12">
        <div class="grid_6"></div>
        <div class="grid_6"></div>
        <div class="clear"></div>
    </div>
</body>

【讨论】：

@Snickers3192：嗯.. 自从我写这篇文章以来的 4 年里，也许有些事情发生了变化；）

【解决方案3】：

960gs 使用容器或包装器 div 设置宽度为 960px 来形成网格。如果您希望您的页眉或页脚拉伸页面的整个宽度，那么您应该将该区域拉到 960 像素包装器之外并为其设置 100% 的宽度。

【讨论】：

【解决方案4】：

没错：

<body>
    <div style="width: 100%;">Heading</div>
    <div class="grid-960-container">
        ...
    </div>
</body>

【讨论】：

【解决方案5】：

是的，这是可能的。

第一步是将此代码添加到您的 CSS：

body,canvas {
    border:0;
    margin:0;
    padding:0;
}

然后创建一个类：

.full-width-div {
    width: 100%;
}

然后像这样将它添加到您的 HTML 中：

<div class="full-width-div"> 
    Your content...
</div>

【讨论】：