Float Оставил 100% высоты 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 && FF
Результаты в IE и FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
Результат одинаков как для IE 6, так и для IE 7.Как я могу устранить разрыв между разделениями?

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

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

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

Это было полезно?

Решение

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

Тем не менее, почему бы не использовать позицию:абсолютный;для #правильно?

Как в

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

Другие советы

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

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

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

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

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

Особенно, если, пытаясь решить проблему с 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