960.gs 背景颜色或边距?
我决定在最近的一个客户项目中尝试使用960网格系统来加快开发速度,它的结构运行完美,我喜欢它!
我遇到的问题是 div 背景颜色中断(我不确定将侧边栏缩放到 100% 高度),并且背景透明地显示 10px 边距(侧边栏和页脚)。到目前为止,这是该网站的实时版本,可能更容易看到问题 - 非常明显: http ://mediasmoke.com/clients/packtv/。
我有我想要的结构,div 位于正确的位置。有没有一种技术可以填补这些空白并保持网站的高度灵活以容纳更多或更少的内容?
我正在画一个空白,我尝试使用第二个容器,但效果不佳......
I decided to try and use the 960 grid system on a recent client project to speed up development, and its structure is working perfectly, and I love it!
The problem I'm having is the break in the div background colour (I am not sure to scale sidebar to 100% height), and the background transparently shows the 10px margins (sidebar and footer). This is a live version of the website so far, it's probably a lot easier to see the problem - it's quite obvious: http://mediasmoke.com/clients/packtv/.
I have the structure I want, the divs are in the right place. Is there a technique to fill in those blanks and keep the website flexible in height for more or less content?
I'm drawing a blank, and I tried using a second container, but that didn't work properly...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
是的,正如 aSeptik 所说,将 .
content
和.sidebar
包装在div
中,并将背景应用于其中。.alpha
和.omega
不能解决问题。看起来您也需要在页脚列上执行相同的操作。Yes, as aSeptik said wrap .
content
and.sidebar
in adiv
and apply the background to that..alpha
and.omega
don't fix the problem. It looks like you will need to do the same on the footer columns too.好吧,我明白了。第二个包装器 div 未随 960gs 扩展的原因是它必须有一个
float:left
。现在宽度为 960 像素,两侧各增加了 10 像素的颜色填充。如果我修剪这个或使包装纸变小,它就会打破 960 克,使其毫无用处。在搞乱了一个简单的解决方案后,我发现我要创建一个 960 像素宽且透明的背景图像 - 两端各 10 像素,所以它给人的印象是 940 像素!
耶!
OK, I figured it out. The reason the second wrapper div didn't expand with the 960gs was because it had to have a
float:left
.Now at 960 pixels wide this gave me an extra 10 pixels colour padding on either side. If I trimmed this or made the wrapper smaller, it breaks the 960gs, making it useless. After messing about with a simple solution, I found I was to create a background image that was 960 pixels wide with transparency - 10 pixels on either end, so it gives the impression of 940 pixels!
Yay!