标记
<%@ 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 和 7 相同。如何消除 div 之间的间隙？
更新
我有两个 100% 高度的 div。左边的 div 是一个固定宽度的 float div。即使在为右侧的 div 提供了正确的 margin-left 之后，两个 div 之间仍然存在间隙(3px)。在 Firefox 中它可以正确呈现。
我使用 quirk 模式的原因是能够为 div 获得 100% 的高度
这个差距可以消除吗？或者有没有更好的方法来使用纯 css 进行两列 100% 高度布局？
最佳答案
如前所述，您的代码充满了黑客攻击。请特别删除不必要的定义。如果浏览器不支持 级联 样式表，它无论如何也不会支持 CSS。
话虽如此，为什么不使用 position: absolute; #right?
如在
#right{
position: absolute;
left: 100px;
padding-left: -100px;
width: 100%;
...
}
关于html - 向左浮动 100% 高度 div - div 之间的间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/280846/