css - 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