Float Left 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
http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
Результат одинаков как в IE 6, так и в 7. Как убрать зазор между элементами div?

Обновить
У меня есть два элемента div высотой 100%. левый div представляет собой плавающий div фиксированной ширины. Даже после указания правильного поля слева для правого div остается зазор (3 пикселя) между двумя div. Где, как в firefox, он отображается правильно.

Причина, по которой я использовал причудливый режим, заключается в том, чтобы получить 100% высоту для div.

Можно ли устранить этот пробел? Или есть лучший способ сделать макет с двумя столбцами высотой 100% с чистым css?


html css css-float
person Zuhaib    schedule 11.11.2008    source источник
comment
Попробуйте добавить больше объяснений о том, что вы пытались и что произошло. Не похоже, что вы приложили слишком много усилий, чтобы задать свой вопрос.   -  person Randy Stegbauer    schedule 11.11.2008
comment
Почему этот вопрос новичка всегда получает отрицательную оценку из первых рук ... большинство из них являются законными вопросами!   -  person chakrit    schedule 11.11.2008
comment
Это не вопрос новичка. Вопрос довольно понятен. Почему между плавающим div есть зазор? ты не понимаешь хтмл?? Мистер Рэнди Штегбауэр, вам не следует смотреть это, если вы не можете понять проблему из названия и содержания. Или вы не хотите читать задачу.   -  person Zuhaib    schedule 11.11.2008
comment
@ Рэнди, сколько еще объяснений ты хочешь? ZuhaibZ предоставил полный исходный код, изображение результата и краткое описание проблемы и желаемого решения. Голосовать за это жалко.   -  person David Arno    schedule 11.11.2008
comment
@Randy: Честно говоря, это вполне законный вопрос. Он задал свой вопрос на грамматически правильном английском языке, что больше, чем я могу сказать о какой-то ерунде на SO, и он предоставил больше справочной информации и примеров, которые беспокоят большинство людей.   -  person Eoin Campbell    schedule 11.11.2008
comment
Я бы понизил комментарий Рэндси, если бы это было возможно. Это очень хороший вопрос с хорошей информацией и изображениями.   -  person Wodzu    schedule 19.11.2010

Ответы (4)


arrow_upward
5
arrow_downward

Как уже было сказано, ваш код полон хаков. Пожалуйста, удалите особенно ненужные определения. Если браузер не поддерживает каскадные таблицы стилей, он все равно не будет поддерживать CSS.

При этом, почему бы не использовать position: absolute; за #верно?

As in

#right{
  position: absolute;
  left: 100px;
  padding-left: -100px;
  width: 100%;
  ...
}
person phihag    schedule 11.11.2008
comment
абсолютное позиционирование определенно решит проблему. Похоже, единственное решение для меня .. Спасибо - person Zuhaib; 11.11.2008

arrow_upward
3
arrow_downward

Удалить комментарий в верхней части страницы

Вы используете много «хаков». Под этим я подразумеваю селекторы CSS, начинающиеся с * html.

Я не говорю, что это причина проблемы, но это не очень хорошая практика и чревато ошибками.

1) попробуйте использовать условные комментарии для браузера, у которого есть проблема с пробелом, вместо использования этих хаков 2) попробуйте отредактировать свой вопрос, предоставив информацию о версии IE, с которой вы тестируете (я думаю, IE 6 или даже ниже).

person postback    schedule 11.11.2008
comment
Я тестировал с использованием IE 6 и 7, результаты одинаковы. Я использовал хак, чтобы получить 100% высоты для div. - person Zuhaib; 11.11.2008
comment
* html не подвержен ошибкам. Это совершенно недопустимый CSS, который работает в IE 5-6 и является надежным способом ориентироваться на IE6. Теперь, когда все знают, что он не предназначен для IE7, его использование не представляет опасности. - person Mr. Shiny and New 安宇; 11.11.2008

arrow_upward
2
arrow_downward

Если честно, если вы заполняете все тело этими дивами, то вам лучше сделать один из них прозрачным фоном и установить цвет фона тела на желаемый цвет, маскируя проблему.

Особенно, если, пытаясь решить проблему с IE, вы внедряете чуму CSS-хаков в то, что должно быть красивым и чистым кодом, учитывая простой макет, к которому вы стремитесь.

person infoxicated    schedule 13.11.2008
comment
... плюс размер страницы изменится лучше. - person da5id; 18.11.2008

arrow_upward
1
arrow_downward

Фактическая проблема заключается в пробелах между закрывающим тегом 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>
person David Eison    schedule 10.08.2012