<doctype html>弄亂了我的CSS

Question

簡而言之，我想要一個right div float垂直延伸100%但它只有在我的html中不包含<doctype>時才有效

在今天的標准中，我真的要添加<doctype>嗎？

這是Internet Explorer中的結果：

doctype問題

這只是簡單的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>

Answer 1

在今天的標准中，我真的要添加<doctype>嗎？

你不必做任何事情，但由於沒有DOCTYPE的基本上聲稱你符合（在長期的寬松感）一個未知/不一致的“怪癖”的標准。

我想解決方案就像將父容器的高度設置為100％或特定像素高度一樣簡單。

確保在HTML和BODY元素上設置高度。
確保在任何父容器上設置高度。

工作示例： 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％。 這需要更多的努力（但仍然在標准內工作良好）。

本文介紹了幾種完成具有相等列高的布局的方法。 這里有更多方法。

Answer 2

如果您正在考慮考慮使用IE（任何版本，請不要偏離本主題），那么您最好指定DOCTYPE。 我已經看到許多頁面沒有通過IE正確地進入着名的Quirks模式。

Answer 3

使用此代碼

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

<doctype html>弄亂了我的CSS

問題描述

3 個解決方案

解決方案1
7 已采納 2012-12-13 05:28:57

解決方案2
2 2012-12-13 05:36:41

解決方案3
1 2012-12-13 05:47:27

<doctype html>弄亂了我的CSS

問題描述

3 個解決方案

解決方案1 7 已采納 2012-12-13 05:28:57

解決方案2 2 2012-12-13 05:36:41

解決方案3 1 2012-12-13 05:47:27

解決方案1
7 已采納 2012-12-13 05:28:57

解決方案2
2 2012-12-13 05:36:41

解決方案3
1 2012-12-13 05:47:27