CSS 100%分区高度，960网格

我一直在拼命想办法解决这个问题，我到处寻找答案，也得出了类似的结果

提要 问题是，我正在使用960网格构建一个网站，并且有三个列，我希望在任何时候都能100%拉伸。这里有一把小提琴供你参考：

基本上html是这样的：

<div class="contentWrapper">
    <div class="container_12">

        <div class="grid_2 leftSide clearfix">
            Left sidebar content.
        </div>

        <div class="grid_7 content">
           Lots of content loaded from the server.
        </div>

        <div class="grid_3 rightSide">
            Right sidebar content.
        </div>

    </div>
</div>

小提琴与我在本地版本中看到的并不完全一致，但很接近。似乎无论我做什么，左右侧边栏都不想扩展到100%

我试过的 我在SO上找到的大多数答案都建议在

html、body

元素中添加

height:100%

，一切都会很好。添加此属性并给出两个边栏<代码>高度：100% 确实有一点作用，但是如果中间列中的内容太大，则在某个点停止，并且不会继续拉伸。

我曾尝试添加960网格附带的

clearfix

类，但似乎没有任何帮助

问题:

---

我如何将小提琴的左右杠高度设为100%，无论中间柱中的内容是什么？

< P>如果你将下面的CSS添加到侧边栏元素中，它将填充高度的100%。

display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;

如果您将侧边栏放置在具有相对定位的包装器

div

中，则内容部分将再次位于正确的位置

我还将主体的

填充

和

边距

设置为0

编辑：

---

如果将

height:100%

添加到

.container\u 12

中，它将获得真实的高度，子元素可以具有100%的高度。请注意，边栏的高度与窗口本身的高度相同，但中间的内容可以高于100%

不知道960网格，即已编辑的解决方案-使用可见性：可见；-

HTML

---

你想让黑色方块的高度达到100%吗？从本质上说，我的英语不好。我试图让那些边栏扩展到浏览器的高度，不管它是什么。这对我来说不起作用。你介意把你的答案更新一下吗？我想尝试保持

相对位置，但也要拉伸到100%。我不知道你在这里是如何组织的。发表了一篇编辑文章——当回到问题时，我想到了可视性的问题——就我所记得的而言，可能不是更具交叉性的-
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;

<div id="box">  
    <div class="vision"> sdfsdfsd </div>
</div>

#box  { 
    float: left;
    border: 2px solid red;

}
.vision {
    width: 300px;
    height: 600px;
    visibility: visible; 
}