![7xxFj]( "7xxFj")
本文介绍了< doctype html>是搞砸我的CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 简单来说，我想让 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基本上是声称您符合未知/不一致的怪癖标准（在最粗糙的术语的意义上）。 我想象的解决方案就像将父容器的高度设置为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 htmlin 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> 解决方案 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 HTML and BODY elements.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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 08-22 16:16