动态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

回答

相关问题