在div元素上划分div高度

我目前有一个包含fieldset的div的问题。我想让我的字段集填充整个div的高度。因此，如果我的div高300px，那么这两个字段集应该占用150px。我不希望我的div有固定的高度。我也不想与职位合作：绝对的。

我做了一个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%; 
}

我希望我的问题是清楚的。如果不是，请留下评论。

来源

2014-11-04 Bosiwow

尝试使用150px的最小高度作为div的最小高度为300px。 http://jsfiddle.net/abhitalks/pynhA/132/ – Abhitalks 2014-11-04 13:27:08

请尝试这个http://jsfiddle.net/pynhA/135/只使用heigth：150px – GibboK 2014-11-04 13:40:59

您是否尝试过使用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%; 
}

来源

2014-11-04 13:39:27 Mathias

尝试使用这个CSS正常工作：

#thediv { 
height:auto; 
border: 1px black solid; 
width: 50%; 
} 

#one, #two { 
height: 50%; 
margin:0; 
padding:0; 
}

给父自动heigth和fieldset a％heigth。

Here's a demo

来源

2014-11-04 13:42:00

我知道你不想使用绝对和相对定位，但是单看这小提琴第一。

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

这使用相对和绝对定位。诀窍使它响应被增加填充底部整体容器：试图保持与背景图像的视频或div的纵横比时

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

这招非常有用的。

来源

2014-11-04 15:23:10 austinthedeveloper

在div元素上划分div高度

回答

相关问题