Float Left 100% height 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
Результаты в IE и FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
Результат такой же как в IE 6, так и в 7. Как я могу убрать разрыв между div?
Удате
У меня есть два div со 100% высотой каждый. левый div - это плавающий div фиксированной ширины. Даже после задания правильного поля margin-left к правому div остается зазор (3 пикселя) между двумя div. Где, как в firefox, он отображается правильно.
Причина, по которой я использовал режим причуды, заключается в том, чтобы получить 100% высоту для div.
Можно ли устранить этот пробел? Или есть лучший способ сделать двухколоночную разметку со 100% высотой с чистым css?
Почему этот вопрос новичков всегда получает опровержение из первых рук… большинство вопросов вполне законные!
Это не вопрос для новичков. Вопрос довольно очевиден. Почему между плавающим div есть промежуток? разве ты не понимаешь html ?? Мистер Рэнди Стегбауэр, вам не следует смотреть это, если вы не можете понять проблему из заголовка и содержания. Или вы не хотите читать проблему.
@ Рэнди, сколько еще объяснений тебе нужно? ZuhaibZ предоставил полный исходный код, изображение результата и краткое описание проблемы и желаемого решения. Голосовать против - это жалко.
@Randy: Честно говоря, это вполне законный вопрос. Он задал свой вопрос на грамматически правильном английском, что больше, чем я могу сказать для некоторых шлаков на SO, и он предоставил дополнительную справочную информацию и образцы, которые беспокоят большинство людей.
Я бы проигнорировал комментарий Рандси, если бы это было возможно. Это очень хороший вопрос с хорошей информацией и изображениями.
Ответы 4
Удалить комментарий вверху страницы Функция "Перевести IE в режим причуд"
Вы используете много «хаков». Под этим я подразумеваю селекторы CSS, которые начинаются с * html
Я не говорю, что это причина проблемы, но это не лучшая практика и подвержена ошибкам.
1) попробуйте использовать условные комментарии для браузера, в котором есть проблема, вместо использования этих хаков 2) попробуйте отредактировать свой вопрос, предоставив информацию о версии IE, с которой вы тестируете (я предполагаю, что это IE 6 или даже ниже).
Я тестировал IE 6 и 7, результаты такие же. Я использовал хак, чтобы получить 100% высоту для div.
* html не подвержен ошибкам. Это совершенно недопустимый CSS, который работает в IE 5-6, и является надежным способом нацеливания на IE6. Теперь, когда все знают, что он не нацелен на IE7, его использование не представляет опасности.
Как уже было сказано, ваш код полон хаков. Пожалуйста, удалите особенно ненужные определения. Если браузер не поддерживает таблицы стилей каскадный, он все равно не будет поддерживать CSS.
При этом почему бы не использовать position: absolute; для # right?
Как в
#right{
position: absolute;
left: 100px;
padding-left: -100px;
width: 100%;
...
}
абсолютное позиционирование определенно решит проблему. Похоже, для меня это единственное решение .. Спасибо
Честно говоря, если вы заполняете все тело этими div, вам лучше дать одному из них прозрачный фон и установить цвет фона тела на желаемый цвет, маскируя проблему.
Особенно, если, пытаясь решить проблему с 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>
Попробуйте добавить больше объяснений о том, что вы пробовали и что произошло. Не похоже, что вы прикладываете слишком много усилий, чтобы задать свой вопрос.