8

简而言之，我希望 aright div float垂直扩展100% ，但它仅在我不包含<doctype>在我的 html中时才有效

在今天的标准中，我真的必须添加<doctype>吗？

这是 Internet Explorer 中的结果：

文档类型问题

这很简单html

<html>
<head>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#left {
background:yellow;
float:left;
width:70%;
min-height:100%;
}
#right {
background:pink;
float:right;
width:30%;
min-height:100%;
}
</style>

<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
4

3 回答 3

7

在今天的标准中，我真的必须添加<doctype>吗？

您不必做任何事情，但是 DOCTYPE 的缺失本质上是在断言您符合（在术语的最宽松意义上）一个未知/不一致的“怪癖”标准。

我想解决方案就像将父容器的高度设置为 100% 或特定的像素高度一样简单。

  • 确保在HTMLandBODY元素上设置了高度。
  • 确保在任何父容器上设置高度。

工作示例：http: //jsfiddle.net/7xxFj/

<div id="one">
    First column
</div>
<div id="two">
    second column
</div>​

HTML, BODY { height: 100%; }
#one { height: 100%; width: 30%; float: left; background-color: red; }
#two { height: 100%; width: 70%; float: left; background-color: blue; }

正如@BoltClock 在评论中指出的那样，您可能想要一个可以扩展超过 100% 的布局。这需要更多的努力（但在标准范围内仍然可以很好地工作）。

本文展示了几种实现具有相同列高的布局的方法。更多方法在这里。

于 2012-12-13T05:28:57.563 回答
2

如果您正在考虑考虑 IE（与此相关的任何版本，请不要离题），那么您最好指定 DOCTYPE。我已经看到许多页面通过 IE 进入著名的 Quirks 模式时无法正确执行此操作。

于 2012-12-13T05:36:41.337 回答
1

使用此代码

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
于 2012-12-13T05:47:27.740 回答