浮法左100％高度的div - 的div之間間隙

標記浮法左100％高度的div - 的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 & 7.我如何消除divs之間的差距？

更新
我有兩個div，每個都有100％的高度。左邊的div是固定寬度的浮動div。即使在向右分區留下正確的餘量之後，兩個分區之間仍然存在差距（3px）。在Firefox中，它呈現正確。

我用怪異模式的原因是爲了能夠獲得的div

100％高度可這種差距被淘汰？還是有更好的方法來做兩列100％的高度佈局與純CSS？

來源

2008-11-11 Zuhaib

嘗試增加更多的解釋你嘗試過什麼，發生了什麼事。似乎你沒有太多的精力來問你的問題。 – 2008-11-11 13:32:52

爲什麼新手問題總是首先被低估......大多數都是合法的問題！ – chakrit 2008-11-11 13:39:04

這不是一個新手問題。這個問題很明顯。爲什麼浮動div之間有差距？你不懂HTML嗎？ Randy Stegbauer先生，如果您無法從標題和內容中瞭解問題，則不應該查看此內容。或者你不在乎讀這個問題。 – Zuhaib 2008-11-11 13:46:13

如上所述，您的代碼充斥着黑客。請特別刪除不必要的定義。如果瀏覽器不支持級聯樣式表，它將不支持CSS。

這就是說，爲什麼不使用position：absolute;對於#right？

正如

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

來源

2008-11-11 13:58:52 phihag

刪除頁面的「把IE進入怪癖模式」的事情

您使用的是大量的「黑客」的頂部的評論。我的意思是以* html開始的CSS選擇器

我不是說這是問題的原因，但它不是很好的做法，並且容易出錯。

1）嘗試使用條件註釋的差距問題，而不是使用這些黑客的瀏覽器 2）嘗試通過提供有關您正在測試的IE版本的信息來編輯您的問題（我的猜測是IE 6或甚至更低）。

來源

2008-11-11 13:55:00 postback

說實話，如果你填補了整身搭配這些div，那麼你最好給他們一個透明背景和設定的背景顏色身體到所需的顏色，掩蓋了問題。

尤其是，如果在嘗試解決IE問題時，考慮到您要拍攝的簡單佈局，您會將CSS黑客瘟疫引入應該是乾淨利落的代碼。

來源

2008-11-13 16:27:58 infoxicated

實際的問題是關閉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>

來源

2012-08-10 15:41:49

浮法左100％高度的div - 的div之間間隙

回答

相關問題