概要

问题是我正在使用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; 
}

CSS 100％div高度与960网格

概要

我尝试过什么

问题

2 个答案: