Html Float Left 100% height div - div 之间的间隙
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/280846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Float Left 100% height div - gap between divs
提问by Zuhaib
Mark Up
标记
<%@ 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
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%;
}
Result in IE && FF
Resutls in IE & FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
The result is same with both IE 6 & 7. How can I remove the gap between the divs?
结果在 IE && FF
Resutls in IE & FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
结果与 IE 6 和 7 相同。如何消除 div 之间的间隙？
Udate
I have two divs each with 100% height. the left div is a fixed width floating div. Even after giving correct margin-left to the right div, there remains a gap (3px) between the two divs. Where as in firefox it renders correctly.
Udate
我有两个 div，每个 100% 高度。左边的div是一个固定宽度的浮动div。即使在为右侧 div 提供正确的 margin-left 之后，两个 div 之间仍然存在间隙（3px）。在 Firefox 中，它可以正确呈现。
The reason I have used quirk mode is to able to get 100% height for the divs
我使用 quirk 模式的原因是能够获得 100% 的 div 高度
Can this gap be eliminated? Or is there a better way to do two column 100% height layout with pure css?
这个差距能消除吗？或者有没有更好的方法用纯 css 做两列 100% 高度布局？
采纳答案by phihag
As already said, your code is full of hacks. Please remove especially the unnecessary definitions. If a browser does not support cascadingstyle sheets, it will not support CSS anyway.
如前所述，您的代码充满了黑客攻击。请特别删除不必要的定义。如果浏览器不支持级联样式表，它无论如何也不会支持 CSS。
That being said, why not use position: absolute; for #right?
话虽如此，为什么不使用 position: absolute; #对吗？
As in
如
#right{
position: absolute;
left: 100px;
padding-left: -100px;
width: 100%;
...
}
回答by postback
Remove the comment on top of the page The "Put IE into quirks mode" thing
删除页面顶部的评论“将 IE 置于怪癖模式”的事情
You are using a lot of 'hacks'. By that I mean the CSS selectors that begin with * html
您正在使用很多“黑客”。我的意思是以 * html 开头的 CSS 选择器
I'm not saying that is the cause of the problem, but it is not good practice and is error prone.
我并不是说这是问题的原因，但它不是好的做法并且容易出错。
1) try using conditional comments for the browser that has the gap problem instead of using those hacks 2) try editing your question by providing information about the version of IE you're testing against (my guess is IE 6 or even lower).
1) 尝试对存在间隙问题的浏览器使用条件注释，而不是使用那些黑客 2) 尝试通过提供有关您正在测试的 IE 版本的信息来编辑您的问题（我的猜测是 IE 6 或更低版本）。
回答by infoxicated
To be honest, if you're filling up the whole body with these divs, then you're better off giving one of them a transparent background and setting the background color of the body to the desired color, masking the problem.
老实说，如果你用这些 div 填满整个 body，那么你最好给其中一个 div 一个透明的背景，并将 body 的背景颜色设置为所需的颜色，从而掩盖问题。
Especially if, in trying to solve the IE issue, you're introducing a plague of CSS hacks into what should be nice and clean code considering the simple layout you're shooting for.
尤其是如果在尝试解决 IE 问题时，考虑到您所追求的简单布局，您正在将一堆 CSS hack 引入到应该是漂亮和干净的代码中。
回答by David Eison
The actual problem is the whitespace between the closing div tag and the next opening div tag. If you put them together on the same line with no space between them, or fill in the white space with a comment, the whitespace will be gone.
实际问题是结束 div 标签和下一个开始 div 标签之间的空白。如果您将它们放在同一行且它们之间没有空格，或者用注释填充空白，则空白将消失。
<div id="left">
</div><div id="right">
</div>
or
或者
<div id="left">
</div><!-- IE doesn't ignore whitespace between divs
--><div id="right">
</div>
