960 gs，全宽背景答案

【问题标题】：960 gs, full width backgrounds960 gs，全宽背景
【发布时间】：2009-12-24 02:08:53
【问题描述】：

我正在尝试实现我在 Photoshop 中创建的设计。我想用16列960 GS，但问题是我只想要960宽度绑定的内容。

我有 4 个不同领域的背景。页眉、内容区域、作为链接的顶部页脚以及包含版权的底部页脚。

页面的上半部分工作正常。背景显示，文本在正确的位置。问题来自页脚。如果内容区域中的数据超出内容区域的最小高度，则顶部页脚中的链接将被向下推，但背景保持静止。我怀疑这是因为内容都是浮动的，并且在内容展开时不会推送背景 div。

如何在使用 960 gs 时设置全宽背景并使其在内容展开时页脚向下滑动？

这是我网站的基本包装。我意识到这可能不适合我想做的事情。

<body>
  <div id="header">
    <div class="container_16">

    </div>
  </div>
  <div id="content">
    <div class="container_16">

    </div>
  </div>
  <div id="footer-top">
    <div class="container_16">

    </div>
  </div>
  <div id="copyright-footer">
    <div class="container_16">

    </div>
  </div>
</body>

960 GS css 在这里：http://www.spry-soft.com/grids/grid.css?column_width=40&column_amount=16&gutter_width=20

我的 CSS - 我省略了与特定内容有关的元素，因为这只是为了让布局正确：

html, body
{
    height: 100%;
}

body
{
    color: #f7f3e7;
    margin:0; 
    padding:0;
    background-color: #f7f3e7;
    line-height: 1.2em;
    font-size: 0.8em;
    font-family: Verdana, Arial, Sans-Serif;
}

#header
{ 
    height: 100px; 
    margin:0; 
    padding:0; 
    background: #666666 url(content/images/Home-Header-Bg.jpg) repeat-x; 
}

#content
{
    min-height: 550px;
    /*min-height: 546px;*/
    margin:0; 
    padding:0; 
    background: #f7f3e7 url(content/images/Home-Content-Bg.jpg) repeat-x top;
}

#top-footer
{
    font-size: .8em;
    min-height: 188px;
    margin:0; 
    padding: 6px 0 6px 0; 
    background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top;
}

#copyright-footer
{
    height: 32px;
    vertical-align: middle;
    font-size: 0.8em;
    line-height: 32px;
    margin:0; 
    padding:0; 
    background: #976f46 url(content/images/Copyright-Footer-Bg.jpg) repeat-x;
}

header、content、footer-top 和 copyright-footer 都有背景设置和高度或最小高度。

我真正想要的是将标题设置为 100 像素高。版权页脚是一组 42 像素高。顶部页脚设置为 200 像素高。如果内容区域足够短以至于页脚不会触及页面底部，我希望版权页脚的底部始终位于页面底部。如果内容区域扩大，我希望页脚向下滑动。我希望所有部分的背景都是 100% - 也就是说，无论浏览器有多宽，但我希望我的内容受 960 网格系统的约束。

有什么建议吗？

编辑：按要求添加 CSS

【问题讨论】：

网上有例子吗？
是的，我认为我们需要一些 CSS 来回答这个问题。
我添加了css。对于内容区域，您可能必须更改文本颜色才能看到它，就像我在内容中的各个部分中所做的那样。

标签： css 960.gs

【解决方案1】：

我将创建一个名为“内容”的 div，该 div 将包含其他 div 并使其他 div 的位置相对。 “内容” div 将具有适合您想要执行的操作的宽度。此外，对于每一列，您都可以使用 'float' css 属性。

【讨论】：

我有类似的东西开始，但它没有帮助。

【解决方案2】：

只需使用<div> 标记包装容器类并设置它们的样式。 记得在容器中的每一“行”后添加.clear div（即使你只有一个“行”），否则将无法正常工作。

<div id="container">
  <div class="container_16">
    <div class="grid_16"><h1>Hello, World!</h1></div>
    <div class="clear"></div> <!-- Important! -->
  </div>
</div>

【讨论】：

【解决方案3】：

我想通了。我需要让页脚浮动。

标记：

<body marginwidth="0" marginheight="0 leftmargin="0" topmargin="0">
    <div id="page-wrapper">
    <div id="header" class="container_full">
        <div class="container_16">
        <div id="logo" class="grid_4 alpha"><a href="/"><img src="content/images/logo-beta.png" /></a></div>

        <div class="grid_10 push_0">
        <ul id="navigation" class="clearfix-header">
            <li><a class="header-link" href="#">About</a>
                <span class="sub-navigation">
                    <a class="sub-link" href="#">Info</a>, <a class="sub-link" href="#">Terms</a></li>
                </span>
            </li>
            <li><a class="header-link" href="#">Account</a>
                <span class="sub-navigation">
                    <a class="sub-link" href="#">Sign In</a>, <a class="sub-link" href="#">Sign Up</a>
                </span>
            </li>
        </ul>
        </div>

        </div>
    </div>

    <div id="content" class="container_full">
        <div class="container_16">

            <div id="page-content" class="grid_16">Page Content</div>

        </div>
    </div>

    <div id="footer">
    <div id="top-footer">
        <div class="container_16">
            <div class="grid_3">
                <h4>Navigation</h4>
                <ul>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                </ul>
            </div>
            <div class="grid_3">
                <h4>Navigation</h4>
                <ul>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                </ul>
            </div>
            <div class="grid_7">
                Big content area
            </div>
            <div class="grid_3">
                <h4>Boring Stuff</h4>
                <ul>
                <li><a href="#">Terms of Use</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Legal Mumbo-jumbo</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div id="copyright-footer">
        <div class="container_16">
            <div class="grid_16">
                Copyright statement
            </div>
        </div>
    </div>
    </div>
    </div>
</body>

CSS：

#footer
{
    width:100%;
    float: left;
    height: 232px;
    position: relative;
    clear:both;
}

#top-footer
{
    width:100%;
    font-size: .8em;
    height: 200px;
    margin:0; 
    padding: 6px 0 6px 0; 
    background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top;
}

#copyright-footer
{
    width:100%;
    height: 32px;
    vertical-align: middle;
    font-size: 0.8em;
    line-height: 32px;
    margin:0; 
    padding:0; 
    background: #976f46 url(content/images/Copyright-Footer-Bg.jpg) repeat-x;
}

【讨论】：