960 gs，全宽度背景

问题描述：

我试图实现我在photoshop中创建的设计。我想使用16列960 GS，但问题是我只想要960宽度的内容。960 gs，全宽度背景

我有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网格系统的约束。

有什么建议吗？

编辑：根据要求

你有在线的例子吗？ – Sampson 2009-12-22 17:29:53

是的，我认为我们需要一些CSS来回答这个问题。 – 2009-12-22 17:32:48

我加了css。对于内容区域，您可能必须更改文本颜色才能看到它，正如我在内容中的各个部分中那样。 – Josh 2009-12-22 17:43:51

答

我想通了。我需要让我的页脚漂浮。

标记：

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

答

我会创建一个名为“内容”可能包含有其他的div并相对其他的div位置的div添加CSS。 'content'div会为你想要做的事情设定适当的宽度。另外，对于每一列你都可以使用'float'css属性。

我有这样的开始，但它没有帮助。 – Josh 2009-12-22 17:58:20

答

只需用<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>

960 gs，全宽度背景

相关推荐