网格 960 占据整个宽度并调整大小

Question

我无法让 960.gs 占据浏览器的整个宽度。我希望网格在调整大小时为 100%，也就是说，如果我向外滚动，文本将显得更小并占用更少的行，但网格仍将占用 100% 的宽度。

这里有这个问题When using grid 960, can I still have a 100% width header section?答案是将顶部设置为 100%。我添加了代码，但这没有任何效果，将主体的宽度设置为 100% 和所有 div 等也没有效果。我究竟做错了什么？这是代码：

<!doctype html>
<html>

    <head>
        <title>My Fragment</title>
        <meta charset="utf-8" />
        <!-- Symbols rendered -->
        <meta name="value" />
        <!-- Do not need to close -->
        <link rel="stylesheet" href="css/960_12_col.css">
        <style>
            body {
                background:green;
            }
            div {
                background: white;
            }
            .grid_4 {
                height: 100px;
            }
        </style>
    </head>

    <body>
        <div class="header" style="width:100%;"></div>
        <div class="mainWrapper container_12">
            <div class="grid_4" style="background:red">sdfds</div>
            <div class="grid_4" style="background:blue">sdfs</div>
            <div class="grid_4" style="background:yellow">sdfs</div>
            <div class="clear">sdfds</div>
        </div>
    </body>

</html>

但这给了我以下结果：

我希望红色列的左侧和黄色列的右侧没有绿色 space，但事实并非如此。我如何摆脱任何一方的 space？

（请注意，我是 css 和 Html 的新手，并且在 30 天内一直在学习 html，以及我在网上找到的任何其他内容。）

Answer 1

首先 - <div class="header" style="width:100%;"></div> 没有包装你的容器。

其次：将 width: 100% 添加到您的 mainWrapper class 而不是 .header，但我知道 960 网格系统中有硬编码宽度，因此您的列.grid_4 仍将是 width: 300px.

尝试使用另一个具有流畅布局的网格系统，例如：http://www.designinfluences.com/fluid960gs/

网格 960 占据整个宽度并调整大小

Grid 960 take up entire width with resize

html

css

960.gs