3列布局文本中的文本区域高度不能设置为百分比

Question

我正在尝试使用两个文本区域创建一个3列布局。我可以设置文本区域宽度，以便列正确显示，但高度会缩小。我正在寻找一种适用于兼容HTML5的浏览器的解决方案 - 不需要支持较旧的浏览器。请参阅jsfiddle here.

HTML5

<div id="wrap">
   <div id="content">
        <div id="columnLeft">
            <div id="toc">This is a table of contents</div>
        </div>
        <div id="columnCenter">
            <textarea>This is edit 1.</textarea>
        </div>
        <div id="columnRight">
            <textarea>This is edit 2.</textarea>
        </div>
    </div>
</div>

CSS

html, body {
height: 100%;
}
#wrap {
height: 100%;
}
#content {
height: 100%;
}
#columnLeft, #columnCenter, #columnRight {
position: relative;
height: 100%;
margin-right: 5px;
}
#columnLeft {
width: 10%;
float: left;
}
#columnCenter {
width: 40%;
float: left;
}
#columnRight {
width: 40%;
float: right;
}
textarea {
width: 100%;
min-height: 100%;
resize: none;
}

如何将3列布局文本中的文本区域高度设置为百分比，或者使用使文本区域高度看起来比例的布局格式？

Answer 1

您忘了定义wrap的身高。

#wrap {
    height: 100%;
}

Fiddle

Answer 2

其他海报是正确的。你忘记了div＃wrap上的height: 100%。

这是一个解决方案： http://jsfiddle.net/ksokhan/NhSpb/8/

Answer 3

尝试在Javascript中动态设置高度

$("textarea").height($("#columnLeft").height());​

Fiddle