Question

我正在尝试实现我在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;
}

页眉，内容，页脚和版权页脚都具有背景设置和高度或最小高度。

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

有什么建议吗？

编辑：按要求添加了CSS

Answer 1

我会创建一个名为'content'的div，它将包含其他div并使其他div的位置相对。 'content'div具有适合您想要的宽度。此外，对于每一列，您可以使用'float'css属性。

Answer 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>

Answer 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;
}

960克，全宽背景

3 个答案: