javascript - 表单元素容器高度

Question

我正在为我的框架构建一个表单管理器，并希望添加方法来根据传递的参数创建表单元素。每个“元素容器”都有以下内容:

• 位于容器顶部的验证行。该行默认关闭(显示:无)，并且仅在发生 JavaScript 验证错误时显示。
• 标签容器(位于左侧)
• 表单控件容器(位于右侧)

这是一个 HTML 示例:

 <div class='control_container'>
      <div class='validation'></div>
      <div class='label_container'>
           <label for=''>Label</label>
      </div>
      <div class='elements_container'>
           <div class='element'>
                <input type='text' name='' value='' />
           </div>
      </div>
 </div>

我的问题是，我需要 control_container 来分隔标签和元素容器，但也需要 label_container 和 element_container 都具有相同的高度，无论内容如何。这两个容器可能有不同的背景颜色，因此我需要确保拉伸(stretch)到 control_container 的底部，并考虑到验证 div 可能会显示(因此使用position:absolute和top:0可能不起作用)。

我尝试过以下方法:

• 为 control_container 提供相对位置，并为 2 个单独的容器提供绝对位置。由于容器的高度主要由标签的高度决定(如果标签是多行或者 element_container 中有多个元素，则此选项不起作用。
• float (我还说更多吗？:D)

我更喜欢一个与大多数浏览器兼容的 CSS 解决方案(包括 IE8(我插入它是为了要求 IE7 哈哈)

有什么想法吗？

** 其他信息 **

我希望布局看起来像这样:

 --------------------- control_container ---------------------
 [Potential validation message (this will be toggled on/off) ]
 [label_container][ elements_container                       ]
 ------------------- end of control_container ----------------

因此 label_container (带有标签)和 elements_container (带有它的元素)将彼此相邻。这两个容器可能有不同的背景颜色，因此它们都应该根据最大元素拉伸(stretch)(高度)。我在这里看到的唯一问题是验证元素默认情况下不会显示，因此使用绝对定位可能不起作用，因为验证消息可能会占据顶部区域并使元素彼此重叠。

Answer 1

HTML:

<div class="controls">
    <div class="message">Test</div>
    <div class="label_container">
    <label for="">Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label </label>
    </div>
    <div class="elements_container">
        <div class="element">
           <input type="text" name="test" value="" />
        </div>
    </div>
</div>

CSS:

.controls {
position: relative;
display: table;
width: 100%;
}

.controls .message {
background: red;
padding: 5px;
color: #FFF;
font-weight: bold;
height: 30px;
width: 100%;
display: table-caption;
box-sizing: border-box;
}

.controls .label_container {
display: table-cell;
background: #D3D3D3;
width: 150px;
height: 100%;
margin-top: 30px;
}

.controls .elements_container {
display: table-cell;
background: #A2A7DD;
color: #000;
width: 650px;
height: 100%;
margin-top: 30px;
margin-left: 150px;
}

所有这些都在 jsFiddle 中:Demo