2 колонки в полный рост в IE6 - PullRequest
Новая
       19

2 колонки в полный рост в IE6

2 голосов
/ 27 марта 2009

Итак, я пытаюсь повторить это в IE6: http://lynet.ca/~alumb/layout.html
Он отлично работает в FF и Chrome, но с треском проваливается в IE6. Есть предложения?

Вот полный набор требований: 

+-----------------------------+
| NavBar                      |
|-----------------------------|
|Menu | Content               |
|     |                       |
|     |                       |
|     |                       |
|     |                       |
|     |                       |
|     |                       |
+-----------------------------+
  • NavBar - это установленная высота в EM (скажем, 2em)
  • Меню - это установленная ширина в EM (скажем, 10em), которая заполняет нижнюю часть страницы
  • Не должно быть глобальной полосы прокрутки страницы
  • меню должно прокручиваться на месте и не закрывать панель навигации (например, переполнение: прокрутка)
  • Контент представляет собой iFrame, который заполняет все доступное пространство.
  • макет должен выжить, изменяя размер браузера

Я попробовал css, но это приводит к сумасшедшему количеству css, и я все еще не могу заставить iframe правильно заполнить пространство.
Я пробовал таблицы, но не могу правильно прокрутить меню.
Единственное решение, которое у меня есть, - это кадры, но на самом деле это не тот путь, по которому я хочу идти.

Решение:
Так что после примерно 36 часов избиения я наконец-то нашел решение. Единственный способ заставить это работать - использовать макеты на основе таблиц. Тем не менее, в Firefox есть странность, которая заставляет высоту вычисляться на 100% иначе, чем в любом другом браузере, поэтому мне также пришлось добавить позицию: фиксированный стиль. Это в основном игнорируется IE6, который использует макет таблицы.

Пример окончательного макета можно увидеть здесь: http://lynet.ca/~alumb/working.html

Ответы [ 2 ]

3 голосов
/ 27 марта 2009

Решение простое. Используйте абсолютное позиционирование. 

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#NavBar {
}


#Menu, #Content {
    position: absolute;
    top: 3em;
    bottom: 0;
    overflow: auto;
}

#Menu {
    width: 10em;
}

#Content {
    overflow: hidden;
    left: 10em;           /* #menu.width */
    right: 0;
}

iframe {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}

Чтобы IE работал, убедитесь, что вы установили тип документа. Например, вставьте это в верхней части вашего HTML-файла: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
0 голосов
/ 27 марта 2009

Трудно смешивать размеры, особенно по вертикали, с помощью CSS. Навбар имеет высоту 2 ems, а меню - 100% - высоту 2 ems - эту последнюю высоту трудно сделать с чистым CSS. Возможно, вам придется рассчитать его с помощью JavaScript.

Альтернативное решение состоит в том, чтобы заставить страницу вести себя как обычная веб-страница, предназначенная для этого (все прокручиваются одним куском) Вот пример макета, который может помочь: Макет левого меню (ширина по ширине)

...