html - <doctype html> 弄乱了我的 CSS-6ren

html - 弄乱了我的 CSS

转载作者：太空狗更新时间：2023-10-29 14:53:48

简而言之，我想要一个 right div float垂直延伸100%但它只在我不包括 <doctype> 时有效在我的 html 上

在今天的标准中，我真的必须添加 <doctype> 吗？？

这是在 Internet Explorer 中的结果:

doctype issues

这很简单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>?

您不必做任何事情，但缺少 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% 以上的布局。这需要更多的努力(但在标准范围内仍能正常工作)。

This article显示了实现具有相等列高的布局的几种方法。更多 methods here .

关于html - <doctype html> 弄乱了我的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13853484/