在div中定位div答案

【问题标题】：Positioning div in div在div中定位div
【发布时间】：2010-10-25 22:02:20
【问题描述】：

我在根据需要在 div 中放置 div 时遇到问题。请看下面的代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    </head>
<body>
<div style="min-width:100%; min-height:90%; background-color:Red; text-align:center;">
<div style="min-height:100%; background-color:Green; width:90%; height:100%;
color:White;">testing 100% height and 90% width in red container</div>
</div>
<div style="min-height:10%; background-color:Yellow; width:100%;"></div>
</body>
</html>

现在我想通过利用红色 div 的所有高度将绿色 div 放置在红色 div 内。因此，绿色 div 的高度应与红色 div 相同，宽度应为红色 div 宽度的 90%。我想我也做了同样的事情，但它在任何浏览器中都不起作用。

要查看问题，请复制我提供的代码并将其保存为 HTML 文件。然后在 IE 中查看。

请帮帮我。

【问题讨论】：

它似乎在 FF 中按照您描述的方式工作。

标签： css xhtml html

【解决方案1】：

您没有 Doctype，因此浏览器会进入 Quirks 模式并出错（IE 比其他浏览器多）
应用于高度为“auto”的元素的子元素的百分比高度被视为高度为“auto”。由于您没有为 body 元素指定高度，因此它的默认值为“auto”。

【讨论】：

更具体一点：除了一个DocType，还需要加上height：100%；到 body 元素（也可能是 html 元素）。
包含文档类型。没有足够的空位。 w3.org/1999/xhtml" style="height:100%; width:100%;">

测试100红色容器中的 % 高度和 90% 宽度

【解决方案2】：

记得将 DOCTYPE 放在开头，否则页面将以怪异模式呈现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

【讨论】：

【解决方案3】：

您的红色 div 必须指定高度，最小高度在 IE 中不起作用。

【讨论】：

【解决方案4】：

现在工作........

<!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" style="height:100%; width:100%;">
<head>
    <title></title>
    </head>
<body style="height:100%; width:100%; top:0px; left:0px;margin: 0px;">
<div style="width:100%; height:90%; background-color:Red;"><center style="height:100%; width:100%;">
<div style="background-color:Green; width:90%; min-height:100%; color:White; text-align:left; padding-left:20px;">testing 100% height and 90% width in red container</div></center>
</div>
<div style="min-height:10%; background-color:Yellow; width:100%;"></div>
</body>
</html>

【讨论】：