html - 将 div 高度除以子元素

Question

我正在做一些 html 和 css。

我目前在使用包含字段集的 div 时遇到问题。 我希望我的字段集填满整个 div 的高度。因此，如果我的 div 高 300 像素，则两个字段集都应采用 150 像素。我不希望我的 div 具有固定的高度。我也不想使用 position: absolute。

我做了一个jsfiddle

如您所见，div 末尾有一个空白区域。我希望字段集占据所有空白空间。

这是我的代码:

<div id="thediv">
    <legend>somefieldset</legend>
    <fieldset id="one">
        <input type="text" value="input1">
        <input type="text" value="input2">
    </fieldset>
    <legend>somefieldset2</legend>
    <fieldset id="two">
        <input type="text" value="input3">
    </fieldset> 
</div>

#thediv{
    min-height: 300px;
    border: 1px black solid; 
    width: 50%;
}

#one,#two{
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
}

我希望我的问题很清楚。如果不是，请发表评论。

Answer 1

您是否尝试过使用 display: flex？它在 Chrome、Firefox 和 IE10+ 中受支持，带有供应商前缀，在 IE10 中语法略有不同。

在此处阅读有关如何使用 display: flex 的更多信息:MDN Using CSS flexible boxes

DEMO

#thediv{
    min-height:300px;
    border:1px black solid; 
    width:50%;
    display: flex;
    flex-direction: column;
}

#one,#two{
    flex: 1;
    margin:0;
    padding:0;
    float:left;
    width: 100%;
}