根據容器調整「div」的高度

如何才能使容器中的「div-3」根據其高度進行調整。根據容器調整「div」的高度

無論這個div-3不完整的內容是什麼，我都需要適合div 1和2所剩的高「div-3」。

可能是div 1或div 2不顯示（display：none）。

HTML代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title></title> 
<style> 
.container{ 
    height:300px; 
    overflow:hidden; 
    width:500px; 
} 
.container div{ 
} 
.div-1{ 
    background-color:#009966; 
} 
.div-2{ 
    background-color:#999999; 
} 
.div-3{ 
    background-color:#3399FF; 
} 

</style> 
</head> 
<body> 
<div class="container"> 
    <div class="div-1">g f erg erg erg rga f erg erg erg rga</div> 
    <div class="div-2"> 
     sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sf erg erg erg rgadf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br /> 
    </div> 
    <div class="div-3">b gf erg erg erg rga</div> 
</div> 
</body> 
</html>

來源

2009-10-28 andres descalzo

您能否重新說明您的問題？你最後一句話是什麼意思？ – 2009-10-29 10:38:52

我不太清楚你的要求。但是，如果在CSS中，而不是使用高度，請使用min-height，如果div內容小於指定高度，它仍會強制使用300px，如果它更大，則會自動調整。

例如

.container{ 
    min-height:300px; 
    overflow:hidden; 
    width:500px; 
}

如果你想確保所有的div顯示出來，你可以嘗試在div樣式設置max-height屬性。

例如

.div-3{ 
    background-color:#3399FF; 
    max-height: 200px; 
}

來源

2009-10-28 20:07:54 kafuchau

http://reference.sitepoint.com/css/min-height – 2009-10-28 22:31:58

IIRC，IE6不支持最小高度和最大高度。（IE6仍然有很多用戶。）但我認爲你可以在這裏使用這個技巧來解決這個問題。 http://blog.whirix.com/2008/11/cross-browser-min-height-ie6-and-others.html – Nosredna 2009-10-29 13:59:03

感謝您的提示。 – kafuchau 2009-10-29 14:25:23

根據容器調整「div」的高度

回答

相關問題