无法让 960.gs 网格容器跨越整个浏览器高度
我一直在使用 Compass 和 960.gs 插件开发一个项目。到目前为止，它的工作效果非常好，几乎不费吹灰之力就可以在不同浏览器上获得几乎相同的结果。不过，我遇到了一个小问题。
我用作 960 的主网格容器的 div 在 CSS 中有一个垂直平铺的背景。我需要这个背景一直延伸到浏览器视口的底部，但 960 对浮动的使用似乎与此有些冲突。
尽管容器的高度设置为 100%，但当未指定溢出时，背景仅向下延伸屏幕的一部分。将溢出设置为隐藏可以修复它，但会隐藏滚动条！
这该如何处理呢？我使用 Webkit 的检查器检查代码和 DOM 是否存在问题，据我所知，没有任何东西会导致这种行为。
它不在网上，代码太大，无法复制和粘贴到此处，但我将在缩写的伪代码中重新创建结构：
<html>
<head></head>
<body>
<primary background div>
<960 container div>
<header div>Stuff</div>
<main content div>More Stuff</div>
<footer div></div>
</div>
</div>
</body>
</html>
我已经扫描了 CSS，没有任何问题。我没有浮动任何东西，我做的最多的是小的填充和边距......
I have been working on a project using Compass with the 960.gs plugin. It's worked quite well so far, giving results that look nearly identical across browsers with little effort. I've run into a small problem, however.
The div I am using as 960's main grid container has a vertically tiled background in CSS. I need this background to extend all the way to the bottom of the browser's viewport, but it would seem that 960's use of floats is somehow conflicting with this.
Despite the container's height being set to 100%, the background only extends part of the way down the screen when overflow is unspecified. Setting overflow to hidden fixes it, but hides the scrollbars!
How can this be dealt with? I've used Webkit's inspector look through the code and DOM for problems and as far as I can see there's nothing that should cause this behavior.
It's not online and the code is too large to copy and paste here, but I will recreate the structure in abbreviated psuedocode:
<html>
<head></head>
<body>
<primary background div>
<960 container div>
<header div>Stuff</div>
<main content div>More Stuff</div>
<footer div></div>
</div>
</div>
</body>
</html>
I've scanned the CSS is there is nothing problematic. I'm not floating anything and the most I'm doing is small padding and margins...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果没有实际的代码，很难说清楚，但是块以
100%拉伸的先决条件是其中之一：100px等）。 ）。HTML标记必须具有高度：100％。所以，看看这个例子： http://jsfiddle.net/kizu/UvAxV/ — 就在那里框架悬停
HTML和BODY获取height: 100%并且包装器也拉伸到100%。因此，就您的情况而言，您必须确保
HTML、BODY和“主要背景 div”都具有height: 100%It's hard to tell without the actual code, but the prerequisite for block to stretch at
100%is one of these:100pxetc.).HTMLtag must haveheight: 100%.So, look at this example: http://jsfiddle.net/kizu/UvAxV/ — there on frame hover
HTMLandBODYgetheight: 100%and the wrapper stretches to100%too.So, in your case, you must to make sure that
HTML,BODYand “primary background div” all haveheight: 100%