代码之家 › 专栏 › 技术社区 › Josh

960 GS,全宽背景

960.gs css

1

Josh · 技术社区 · 15 年前

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

我有4个不同领域的背景。页眉、内容区、链接的上页脚和其中包含版权的下页脚。

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

当使用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高。版权页脚为42像素高。顶部页脚设置为200像素高。如果内容区域足够短,页脚不会碰到页面底部,我希望版权页脚的底部始终位于页面底部。如果内容区域展开,我希望页脚向下滑动。我希望所有部分的背景都是100%,也就是说,无论浏览器有多宽,但我希望我的内容被960网格系统绑定。

有什么建议吗?

编辑:按要求添加CSS

3 回复 | 直到 15 年前

1

2

Partial 15 年前

我将创建一个名为“content”的DIV,它将包含其他DIV,并使其他DIV的位置相对。“content”DIV的宽度应该与您要执行的操作相适应。另外,对于每一列,您可以使用“float”css属性。

2

1

Veeti 15 年前

只需用包装容器类 <div> 标签和样式。 记得要加 .clear 容器中每“行”后的分隔 (即使您只有一个“行”),否则它将无法正常工作。

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

3

0

Josh 15 年前

我知道了。我需要让我的脚浮动。

Markup:

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