在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高度

回答

相關問題