動態DIV框的高度與孩子DIV

我試圖建立與下面的圖片示意地呈現CSS樣式的HTML的中心位置： alt text http://www.freeimagehosting.net/uploads/216e5750a8.png 動態DIV框的高度與孩子DIV

我設法內格與下面的HTML的位置：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<body> 
<div style="background-color: yellow; width: 100px; height: 100px; 
position: relative;"> 
    <div style="background-color: gray; position: absolute; 
    top: 8px; left: 8px; right: 8px; bottom: 8px"></div> 
</div> 
</body> 
</html>

但問題是，它停止工作，如果我想外部div的高度是動態的。刪除高度值隱藏外部div。

在所有條件下如何實現？

來源

2009-07-02 Gennady Shumakher

你究竟在做什麼？無論外部DIV的高度如何，垂直居中內部DIV？ – 2009-07-02 11:19:23

外部div內沒有內容，它會自行崩潰。內部div中是否有任何內容？ – peirix 2009-07-02 11:27:21

寬度'W'是否已知？嗯，這有點不相干......

好的，你需要做這樣的事情（假設你將外部div放在你想要的位置）。：

<div style="float:left; background-color:yellow; width:100px;"> 
    <div style="background-color:gray; margin:8px;">You need enough content here to push the width out far enough...</div> 
</div>

你可能需要把外面的div在進一步外面div來獲得定位是正確的，但是外面的div必須有一個浮動的變量（左或右 - 這並不重要）。

您可以添加邊框和填充等，以適應這些div。整個過程的關鍵是外部股利存在的浮動價值。

來源

2009-07-03 08:10:30

不確定你要去哪裏。但是，你似乎只想在內部div上填充內容？

<div style="background-color: yellow; width: 100px; 
      position: relative; padding: 8px"> 
<div style="background-color: gray;">Hello</div>

這樣，內div的內容會改變外div的高度...

來源

2009-07-02 11:30:42 peirix

如果在相對位置的對象只絕對位置的對象[S]，你必須修復高度相對位置對象的值。

提示。您可以通過javascript更改高度值，或者定義相對位置對象的最小高度（CSS 2+）屬性。

來源

2009-07-02 11:43:55

動態DIV框的高度與孩子DIV

回答

相關問題