简而言之,我想要一个正确的div浮动垂直延伸100％
但它只适用于我不包含< doctype>在我的 HTML上
但它只适用于我不包含< 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>
解决方法
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.
