< doctype html>是搞砸我的CSS [英] <doctype html> is messing up my CSS
问题描述
简单来说，我想让 right div float 垂直延伸 100％
只有当我今天的标准中不包括我的html
上的< doctype> 必须添加< 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>内容< / div>
< div id =right>侧面内容< / div>
< / div>
< / body>
< / html>今天标准中的
<我真的要添加< doctype>？
< t 有做任何事情，但是缺少DOCTYPE基本上是声称您符合未知/不一致的怪癖标准（在最粗糙的术语的意义上）。
我想象的解决方案就像将父容器的高度设置为100％或特定像素高度一样简单。
- 确保在
HTML和BODY元素上设置height。
$ b jsfiddle.net/7xxFj/rel =nofollow> http://jsfiddle.net/7xxFj/
< div id =one>
第一列
< / div>
< div id =two>
第二列
< / div>
HTML，BODY {height：100％; }
#one {height：100％;}宽度：30％; float：left; background-color：red; }
#two {height：100％;宽度：70％; float：left; background-color：blue; }
正如@BoltClock在注释中指出的，你可能想要一个布局， 。这需要更多的努力（但仍然在标准内工作良好）。
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
in today's standard, do i really have to add <doctype>?
This is the result in Internet Explorer:
this is just simple 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>
in today's standard, do i really have to add
<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.
I imagine the solution is as simple as setting the height of the parent container to 100% or to a specific pixel height.
- ensure that height is set on the
HTMLandBODYelements. - ensure that height is set on any parent containers.
Working example: 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%. 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.
这篇关于< doctype html>是搞砸我的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
