与父级匹配的子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%; position:absolute; height:100%;

您将要确保在右边一半上应用margin-left 。

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