2 столбца полной высоты в IE6

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

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

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

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

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

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


html layout css internet-explorer-6
person alumb    schedule 26.03.2009    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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">
person strager    schedule 27.03.2009
comment
@alumb, еще одно обновление (переполнение тела). Я думаю, что проблема вызвана границами iframe. - person strager; 27.03.2009
comment
@strager, я не думаю, что вижу то, что видишь ты. Я вижу это: lynet.ca/~alumb/strager.jpg. Слово «нижний» должно быть внизу страницы. Я также обновил файл strager.html. Спасибо за помощь. - person alumb; 27.03.2009
comment
@alumb, грр, я не тестировал в IE, как должен был. Обновленный ответ. - person strager; 27.03.2009
comment
@strager, хорошо, теперь у меня возникла странная проблема, когда в IE6 iframe полностью исчезает, если для его позиции установлено значение absolute. - person alumb; 27.03.2009
comment
@strager, это проблема hasLayout. Мне нужно установить высоту и ширину #content и body. однако 100% высота iframe по-прежнему относится к телу, а не к #container, что приводит к переполнению страницы. - person alumb; 27.03.2009

arrow_upward
0
arrow_downward

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

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

person Matthew James Taylor    schedule 27.03.2009
comment
по разным причинам я не могу этого сделать, как бы мне ни хотелось. Набор требований фиксирован. - person alumb; 27.03.2009