フロート左100％高さdiv-div間のギャップ

StackOverflow https://stackoverflow.com/questions/280846

  •  07-07-2019
  •  | 
  •  

質問

マークアップ 

<%@ 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の結果＆amp;＆amp; FF
IEでの結果＆amp; FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
結果は、IE 6＆amp;の両方で同じです。 7. div間のギャップを削除するにはどうすればよいですか？

Udate
100％の高さを持つ2つのdivがあります。左のdivは固定幅の浮動divです。右のdivに左マージンを正しく指定した後でも、2つのdivの間にギャップ（3px）が残ります。 firefoxのように、正しくレンダリングされます。

quirkモードを使用した理由は、divの高さを100％にできるためです

このギャップは解消できますか？または、純粋なCSSで2列の100％高さのレイアウトを行うより良い方法はありますか？

役に立ちましたか？

解決

既に述べたように、あなたのコードはハッキングに満ちています。特に不要な定義を削除してください。ブラウザがカスケードスタイルシートをサポートしていない場合、CSSはサポートされません。

そうは言っても、なぜposition：absoluteを使用しないのですか。 #right？

と同様

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

他のヒント

ページ上部のコメントを削除する 「IEを奇抜モードにする」物

多くの「ハック」を使用しています。つまり、* html

で始まるCSSセレクターです。

それが問題の原因だと言っているわけではありませんが、それは良い習慣ではなく、エラーを起こしやすいです。

1）これらのハックを使用する代わりに、ギャップの問題があるブラウザーに対して条件付きコメントを使用してみてください 2）テスト対象のIEのバージョンに関する情報を提供して、質問を編集してみてください（IE 6またはそれ以前の推測です）。

正直に言うと、これらのdivで体全体を埋める場合は、そのうちの1つに透明な背景を与え、体の背景色を目的の色に設定して、問題を隠した方が良いでしょう。

特に、IEの問題を解決しようとして、撮影するシンプルなレイアウトを考慮して、すてきできれいなコードにCSSハックのペストを導入している場合。

実際の問題は、終了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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top