CSS 100% div 高度，960 网格

Question

我一直在努力解决这个问题，我一直在寻找答案，并得出了类似的结果。

概要

问题是我正在使用 960 网格构建一个网站，并且我想要始终以 100% 的比例拉伸三列。这是一个供您参考的小提琴：http://jsfiddle.net/Uec7h/1/

基本上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>

CSS 是这样的

html, body {
    height: 100%;
}

.content {
    height: 100%;
}

.leftSide {
    height: 100%;
    background-color: #000000;
}

.rightSide {
    height: 100%;
    background-color: #000000;
}

.contentWrapper {
    height: 100%;
}

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

我的尝试

我在 SO 上找到的大多数答案都建议将 height: 100% 放在 html, body 元素上，一切都应该正常。添加这个属性并给两个侧边栏height: 100% 确实有点作用，但是如果中间列的内容太大，它会在某个点停止并且不会继续拉伸。

我已尝试添加 960 网格附带的 clearfix 类，但似乎没有任何帮助。

问题

无论中间列是什么内容，如何让小提琴中的左右侧边栏高度为 100%？

Answer 1

如果您将以下 CSS 添加到侧边栏元素，它将填充 100% 的高度。

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

如果您将侧边栏放入包装器div 并以relative 定位，则内容部分将再次出现在正确的位置...

我还将 padding 和 margin 设置为 0 用于正文。

编辑：

如果您将height: 100% 添加到.container_12，它将获得一个真实的高度，并且子元素可以有100% 的高度。请注意，侧边栏将与窗口本身一样高，但您在中间的内容可能高于 100%...Fiddle

Answer 2

不知道 960 网格，EDITED 解决方案 - 使用可见性：可见； -

HTML

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

CSS

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

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