Float Left 100% высота div - промежуток между div - PullRequest
Новая
       12

Float Left 100% высота div - промежуток между div

6 голосов
/ 11 ноября 2008

Наценка 

<%@ 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. Как я могу устранить разрыв между элементами?

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

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

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

Ответы [ 4 ]

5 голосов
/ 11 ноября 2008

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

Как говорится, почему бы не использовать положение: абсолютное; за # верно?

Как и в 

#right{
  position: absolute;
  left: 100px;
  padding-left: -100px;
  width: 100%;
  ...
}
3 голосов
/ 11 ноября 2008

Удалить комментарий вверху страницы Вещь "Переведите IE в режим причуд"

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

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

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

2 голосов
/ 13 ноября 2008

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

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

1 голос
/ 10 августа 2012

Фактическая проблема - пробел между закрывающим тегом 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...