<doctype html>弄乱了我的CSS
use*_*120 7 html css doctype internet-explorer
简而言之,我想要一个right 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>
在今天的标准中,我真的需要添加
<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%.这需要更多的努力(但仍然在标准内工作良好).
本文介绍了几种完成具有相等列高的布局的方法.这里有更多方法.