Question

我正在做一些html和css。

我目前遇到包含字段集的div的问题。我希望我的场地设置能够填满整个div的高度。因此，如果我的div为300px高，则两个场集应占用150px。我不希望我的div有一个固定的高度。我也不想与职位合作：绝对。

正如您所看到的，div的末尾有一个空白区域。我希望fieldsets占用所有空白区域。

这是我的代码：

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

Answer 2

我知道你不想使用绝对和相对定位，而只是先看看这个小提琴。

http://jsfiddle.net/pynhA/138/

这使用相对和绝对定位。使其响应的技巧是在整个容器中添加填充底部：

#thediv {
    border:1px black solid;
    width:50%;
    padding-bottom:50%;
    background: red;
    position: relative;
}

当尝试使用背景图像维护视频或div的宽高比时，这个技巧非常有用。

将div高度除以子元素

2 个答案: