6

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

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?

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.

The reason I have used quirk mode is to able to get 100% height for the divs

Can this gap be eliminated? Or is there a better way to do two column 100% height layout with pure css?

4

4 回答 4

5

As already said, your code is full of hacks. Please remove especially the unnecessary definitions. If a browser does not support cascading style sheets, it will not support CSS anyway.

That being said, why not use position: absolute; for #right?

As in

#right{
  position: absolute;
  left: 100px;
  padding-left: -100px;
  width: 100%;
  ...
}
于 2008-11-11T13:58:52.447 回答
3

Remove the comment on top of the page The "Put IE into quirks mode" thing

You are using a lot of 'hacks'. By that I mean the CSS selectors that begin with * html

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).

于 2008-11-11T13:55:00.833 回答
2

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.

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.

于 2008-11-13T16:27:58.817 回答
1

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 id="left">
</div><div id="right">
</div>

or

  <div id="left">
    </div><!-- IE doesn't ignore whitespace between divs
  --><div id="right">
     </div>
于 2012-08-10T15:41:49.397 回答