1

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

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 列布局文本中的文本区域高度设置为百分比，或者使用使文本区域高度看起来成比例的布局格式？

4

3 回答 3

2

您忘记定义wrap' 的高度。

#wrap {
    height: 100%;
}

小提琴

于 2012-08-24T17:46:26.947 回答
0

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

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

于 2012-08-24T17:47:13.833 回答
0

尝试在Javascript中动态设置高度

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

小提琴

于 2012-08-24T17:52:38.830 回答