Javascript 表单元素容器高度

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

• 位于容器顶部的验证行。默认情况下，此行处于关闭状态（显示：无），并且仅在发生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>

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

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>

---

所有这些都在JSFIDLE中：

你能把你的代码放到JSFIDLE中吗，这样我们就可以更好地帮助你了？当然，给你：我只是想确保我不太喜欢接受？显示表，所有浏览器都支持吗？是的，您可以在这里看到关于显示表的内容：。我在前面的代码中也做了一些修改，这里是：@Ismatjon-很好的答案！，除了您提供的JSFIDLE链接之外，请包含您的代码。谢谢

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

.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;
}