<doctype html>弄乱了我的CSS
[英]<doctype html> is messing up my CSS
问题描述
In a nutshell, i want a right div float to extend vertically 100% but it only works when i don't include <doctype> on my html 
简而言之，我想要一个right div float垂直延伸100%但它只有在我的html中不包含<doctype>时才有效
in today's standard, do i really have to add <doctype> ? 在今天的标准中，我真的要添加<doctype>吗？
This is the result in Internet Explorer: 这是Internet Explorer中的结果：
this is just simple html 这只是简单的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>
3 个解决方案
解决方案1
7 已采纳 2012-12-13 05:28:57
in today's standard, do i really have to add
<doctype>?<doctype>吗？
You don't have to do anything, but the absence of the DOCTYPE is essentially asserting that you conform (in the loosest sense of the term) to an unknown/inconsistent "quirks" standard. 你不必做任何事情，但由于没有DOCTYPE的基本上声称你符合（在长期的宽松感）一个未知/不一致的“怪癖”的标准。
I imagine the solution is as simple as setting the height of the parent container to 100% or to a specific pixel height. 我想解决方案就像将父容器的高度设置为100％或特定像素高度一样简单。
- ensure that height is set on the
HTMLandBODYelements.确保在HTML和BODY元素上设置高度。 - ensure that height is set on any parent containers. 确保在任何父容器上设置高度。
Working example: http://jsfiddle.net/7xxFj/ 工作示例： 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; }
As @BoltClock pointed out in the comments, you probably want a layout that can extend beyond 100%. 正如@BoltClock在评论中指出的那样，您可能希望布局可以超出100％。 This requires a little more effort (but still works well within the standard). 这需要更多的努力（但仍然在标准内工作良好）。
This article shows several methods for accomplishing layouts with equal column heights. 本文介绍了几种完成具有相等列高的布局的方法。 More methods here . 这里有更多方法 。
解决方案2
2 2012-12-13 05:36:41
If you are thinking of considering IE (any version for that matter, lets not digress to this topic), then you are better of specifying the DOCTYPE. 如果您正在考虑考虑使用IE（任何版本，请不要偏离本主题），那么您最好指定DOCTYPE。 I have seen many pages which do not do this properly through IE into the famous Quirks mode. 我已经看到许多页面没有通过IE正确地进入着名的Quirks模式。
解决方案3
1 2012-12-13 05:47:27
Use this Code 使用此代码
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.