Html 包含textarea的Div与Div左右重叠

我有一个对话框，由一系列的div组成，分别用于页眉、正文和页脚，这些div进一步细分为左、中、右部分。想象一个tic-tac趾板，你就会明白了。出于某种原因，只要我在body center中放置一个textarea，它就会与左右body Div重叠。问题发生在使用“con”类的div部分的某个地方

下面是问题的图片：

编辑：在CSS的.con部分，我将height:100%替换为height:175px。我不明白的是，为什么看起来还可以，但身高：100%就不行了？包含构成对话框的所有子div的顶级div的尺寸以像素为单位指定，对话框页眉和页脚也是如此。为什么中间也必须指定一个精确的值？我不想这样做，因为这意味着每个对话框都需要一个特殊的CSS类，这样可以在对话框中间添加一个特定的高度值

HTML在下面，CSS在后面

    <div class="ttl">
        <div class="ttlt">
            <div class="ttlt-l"></div>
            <div class="ttlt-m">
                <a class="close" href="javascript:void(0);" onclick="cancelNotes();this.blur();return false;"></a>
                <span>Create Note</span>
            </div>
            <div class="ttlt-r"></div>
        </div>
        <div class="ttlb">
            <div class="ttlb-l"><span></span></div>
            <div class="ttlb-m"><span></span></div>
            <div class="ttlb-r"><span></span></div>
        </div>
    </div>

    <div class="con">
        <div class="con-l"></div>
        <div class="">
            <input type="hidden" id="hdnNoteID" />
            <textarea id="txtNote" rows="11" cols="50"></textarea>
        </div>
        <div class="con-r"></div>
    </div>

    <div class="ftr">
        <div class="ftr-l"></div>
        <div class="ftr-m">
            <a onclick="cancelNotes();this.blur();return false;" href="javascript:void(0);" class="btn"><span>Cancel</span></a>
            <a onclick="addNotes();this.blur();return false;" href="javascript:void(0);" class="btn"><span>Add Note</span></a>
        </div>
        <div class="ftr-r"></div>
    </div>

---

没有真实的东西，很难在那里提供帮助

块

.con

及其左右部分具有

高度：100%

。仅当它们的高度以像素为单位时，此操作才有效。现在这个左、右部分不可见，因为它们的高度为0。如果您将为这个块的外部div提供html和css，那么帮助会更简单。尝试为其设置固定高度，如300px

此外，我可以建议肮脏的解决办法。在样式之后添加此css：

.con {
  border:9px solid #000;
  border-width:0 9px;
  padding:0 9px;
  width:auto;
}

---

现在你不需要每个角落都有一个div。我们有网络工具包。它可以做很多真正需要的事情。不幸的是，我没有构建它，而且我在web前端编码方面没有太多经验。所以webkit对我来说没有任何意义。@Legion:你能试着缩小文本区域的宽度和高度，看看是否有帮助。减少文本区域的

cols

和

rows

值。我尝试过这样做，虽然文本区域变小了，但边框保持不可见。不幸的是，这没有帮助。

.con {
  border:9px solid #000;
  border-width:0 9px;
  padding:0 9px;
  width:auto;
}