Question

我在根据需要在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中查看。

请帮帮我。

Answer 1

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

Answer 2

请记住在开头放置DOCTYPE，否则页面将以怪癖模式呈现。

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

Answer 3

你的红色div必须指定一个高度，min-height在IE中不起作用。

Answer 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>

在div中定位div

4 个答案: