与父级匹配的子区域的高度

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/