html – Float Left 100％height div

标记

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Zuhaib.test" %>
<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="css/general.css" rel="stylesheet" type="text/css" />
    <link href="css/outbound.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server" class="wrapper">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div id="left">
    </div>
    <div id="right">
    </div>  
    </form>
</body>
</html>

CSS

html,body
{
    margin:0;
    padding:0;
    border:0;
    overflow:hidden;
    width:100%;
    height:100%;
}
* html body 
{
    height:100%;
    width:100%;
}    
*{
    margin:0;
    padding:0;
}
.wrapper 
{
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    height:100%;
    width:100%;
}
* html .wrapper 
{
    width:100%;
    height:100%;
}
#left{
    float:left;
    height:100%;
    width:100px;
    overflow:hidden;
    background-color:Blue;
}
* html #left{
    height:100%;
    width:100px;
}
#right{
    margin-left:100px;
    height:100%;
    background-color:Red;
}
* html #right{
    height:100%;
}

导致IE&& FF
Resutls in IE & FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
IE 6& S的结果相同. 7.如何消除div之间的差距？

UDATE
我有两个div,每个都有100％的高度.左边div是一个固定宽度的浮动div.即使在向右侧div提供正确的边距之后,两个div之间仍然存在间隙(3px).在firefox中它正确呈现.

我使用quirk模式的原因是能够为div获得100％的高度

这个差距可以消除吗？或者有更好的方法来使用纯css进行两列100％高度布局？

解决方法

如前所述,您的代码充满了黑客攻击.请删除特别不必要的定义.如果浏览器不支持级联样式表,则无论如何它都不支持CSS.

话虽如此,为什么不使用position：absolute;为#right？

如在

#right{
  position: absolute;
  left: 100px;
  padding-left: -100px;
  width: 100%;
  ...
}

html – Float Left 100％height div – div之间的差距

解决方法

相关文章