无法让 960.gs 网格容器跨越整个浏览器高度答案

【问题标题】：Can't get 960.gs grid container to span full browser height无法让 960.gs 网格容器跨越整个浏览器高度
【发布时间】：2023-03-26 15:39:02
【问题描述】：

我一直在使用 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，没有任何问题。我没有浮动任何东西，我所做的最多的是小的填充和边距......

【问题讨论】：

如果您不发布指向该网站的链接或显示此内容的网站示例，这将很难提供帮助。
已编辑以包含一些代码。

标签： html css grid height 960.gs

【解决方案1】：

没有实际代码很难判断，但块在100% 处伸展的先决条件是以下之一：

它的父级有一个绝对设置的高度（如100px 等）。
或 all 此块的父级直到 HTML 标记必须具有 height: 100%。

所以，看看这个例子：http://jsfiddle.net/kizu/UvAxV/ — 在框架上悬停 HTML 和 BODY 得到 height: 100% 并且包装器也延伸到 100%。

因此，在您的情况下，您必须确保 HTML、BODY 和“主背景 div”都具有 height: 100%

【讨论】：