向左浮动 100% 高度 div - div 之间的间隙答案

【问题标题】：Float Left 100% height div - gap between divs向左浮动 100% 高度 div - div 之间的间隙
【发布时间】：2010-09-21 19:18:42
【问题描述】：

标记

<%@ 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 是一个固定宽度的浮动 div。即使在为右 div 提供了正确的 margin-left 之后，两个 div 之间仍然存在间隙（3px）。与在 Firefox 中一样，它可以正确呈现。

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

这个差距可以消除吗？或者有没有更好的方法用纯 css 做两列 100% 高度布局？

【问题讨论】：

尝试添加更多关于您尝试了什么以及发生了什么的解释。看起来你并没有花太多精力来问你的问题。
为什么新手问题总是第一手被否决......大多数都是合法的问题！
这不是一个新手问题。这个问题是不言自明的。为什么浮动div之间有间隙？你不懂html吗？？ Randy Stegbauer 先生，如果您无法从标题和内容中理解问题，您不应该查看此内容。或者你不关心阅读问题。
@Randy，你还想要多少解释？ ZuhaibZ 提供了完整的源代码、结果图片以及问题的简明描述和他想要的解决方案。对此投反对票是可悲的。
@Randy：公平地说，这是一个完全合理的问题。他用语法正确的英语问了他的问题，这比我能说的关于 SO 的一些渣滓要多，而且他提供了更多的背景信息和大多数人都烦恼的样本。

标签： html css css-float

【解决方案1】：

如前所述，您的代码充满了黑客攻击。请特别删除不必要的定义。如果浏览器不支持层叠样式表，它无论如何也不支持 CSS。

话虽如此，为什么不使用 position: absolute; #对吗？

如

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

【讨论】：

绝对定位绝对能解决问题。看起来对我来说是唯一的解决方案.. 谢谢

【解决方案2】：

删除页面顶部的评论 “将 IE 置于怪异模式”的事情

您使用了很多“黑客”。我指的是以 * html

开头的 CSS 选择器

我并不是说这是问题的原因，但这不是好的做法，而且容易出错。

1) 尝试对有间隙问题的浏览器使用条件 cmets，而不是使用那些 hack 2) 尝试通过提供有关您正在测试的 IE 版本的信息来编辑您的问题（我的猜测是 IE 6 甚至更低）。

【讨论】：

我用 IE 6 & 7 测试过，结果是一样的。我已经使用 hack 为 div 获得 100% 的高度。
* html 不容易出错。这是完全无效的 CSS，恰好在 IE 5-6 中工作，并且是针对 IE6 的可靠方法。既然大家都知道它不是针对 IE7 的，那么使用它就没有危险了。

【解决方案3】：

老实说，如果你要用这些 div 填充整个主体，那么最好给其中一个设置透明背景并将主体的背景颜色设置为所需的颜色，从而掩盖问题。

特别是如果，在尝试解决 IE 问题时，考虑到您所追求的简单布局，您正在将大量 CSS hack 引入应该是漂亮和干净的代码中。

【讨论】：

...加上页面会更好地调整大小。

【解决方案4】：

实际的问题是结束 div 标记和下一个开始 div 标记之间的空白。如果你把它们放在同一行，它们之间没有空格，或者用注释填充空格，空格就会消失。

<div id="left">
</div><div id="right">
</div>

或

  <div id="left">
    </div><!-- IE doesn't ignore whitespace between divs
  --><div id="right">
     </div>

【讨论】：