儿童div的高度与父母匹配

Question

所以我浏览了一下这个网站并知道有这样的问题，但是其中很多是流体宽度布局，我无法使用这些技术来处理我正在做的事情。

我只是为一个表单设计样式，并且在浏览器调整大小方面遇到了麻烦。您可以在下图中看到我正在使用的div和我的问题。

正如您所看到的，在.col-1-3 div下方，当浏览器调整大小时，会显示一些空间。我想将.col-1-3的高度与其父级.formInput的高度相匹配。

有人知道这样做吗？我不在乎它是黑客还是某种Javascript / jQuery解决方案。

修改

我确定你们想要一些代码，谁不想？

以下是表单上第一个字段和标签的HTML：

<div class="formInput">
    <div class="grid">
        <div class="col-1-3 left">
            <label>
                <p class="right">AsQ a question <img src="{{ STATIC_URL }}rd/images/arrow_right_small.png" /></p>
            </label>
        </div><!-- .col-1-3 -->         

        <div class="col-2-3 right">
            {{ form.name }} **Django code**
        </div><!-- .col-2-3 -->
    </div><!-- .grid -->

以下是该字段所需的所有CSS：

.right { float: right: }

.left { float: left; }

.formInput { 
    border: 6px solid #A5C3D2;
    display: block; 
    margin-bottom: 25px;    

    behavior: url('./scripts/border-radius.htc');
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
}

.formInput .col-1-3 { 
    background: #006180; 
    color: #FDBA63;
    text-align: right;

    behavior: url('./scripts/border-radius.htc');
    border-radius: 12px 0 0 12px;
    -moz-border-radius: 12px 0 0 12px;
    -webkit-border-radius: 12px 0 0 12px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.formInput .col-1-3 label p { width: 220px; }

/* Grid */
*, *:after, *:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.grid:after {
    clear: both;
    content: "";
    display: table;
}

/* Grid Gutters */
[class*='col-'] {
    float: left;
    padding-right: 20px;
}

[class*='col-']:last-of-type { padding-right: 0; }

.col-2-3 { width: 66.66%; }

.col-1-3 { width: 33.33%; }

如果你们想看到我的问题的一个有效例子：http://jsfiddle.net/qMgwz/

Answer 1

将position:relative添加到.col-1-3的父元素。

然后给.col-1-3 position:absolute; height:100%;

您需要确保将margin-left应用于右半部分。

请参阅此示例（基于您提供的代码）：http://jsfiddle.net/ULM5s/1/