2009-05-19 4 views
2

Когда я изменяю размер окна и когда появляется вертикальная полоса прокрутки, если я прокручиваю ее до самого низа, - нижний ломается. Я не понимаю, почему, но я думаю, что это имеет какое-то отношение к тому, как страница использует 100% -ную высоту. Любая помощь будет оценена!css ошибка 100% высоты

Вот страница: zxsdesign.com/main1.html

Вот скриншот

zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNG

ответ

2

Это смесь из вас, используя свойство CSS height и абсолютное позиционирование. ajm говорил об использовании min-height - в идеале вы должны использовать его вместо height, когда делаете вещи на 100% выше.

К другим проблемам. Когда вы позиционируете элементы абсолютно, они больше не являются частью структуры страницы. Вместо этого они живут в отдельной плоскости и поэтому не влияют на размеры страницы. Когда ваш <div id="flashcontent"> проходит мимо границы окна, он не влияет на границы <body>.

Вы можете исправить это, не используя position: absolute. Нет никакой реальной необходимости. Вместо этого вы можете поместить элемент #flashcontent в нормальное состояние и полностью избавиться от элемента #bg - просто введите #flashcontent вместо фона. Затем используйте margin: 0 auto; и padding-top: 179px;, чтобы разместить его в нужном месте.

+0

Я сделал то, что вы сказали. И это вроде помогло, но дело в том, что все еще 5px пространства на дне, которое не покрыто. Любая идея почему? Спасибо за ваше время. – 2009-05-19 19:54:17

+0

Теперь, когда я проверил страницу во всех популярных браузерах, вот что я увидел: Firefox: очень близко, - эти проклятые 5px; Опера: работает как шарм; IE7: не работает; Safari: не работает; Chrome: не работает. Я полностью потерян. – 2009-05-19 20:55:18

+0

Я забыл добавить min в высоту в #flashcontent. Виноват. Теперь это выглядит правильно. Но я не могу понять, почему в Opera вертикальная полоса прокрутки идет полностью вниз, но в других браузерах она останавливается, когда заканчивается #flashcontent. – 2009-05-19 21:19:25

0

К сожалению, высота: 100%; выполняется по-разному ... Вы не можете быть уверены, что браузер делает то, что вы хотите, когда используете его.

Попробуйте использовать clear: left; или ясно: оба; в вашем стиле.

+1

Я никогда не думал, что 100% может быть настолько сложным. Я пробовал использовать свойство clear, но безрезультатно. Спасибо за ваше время! – 2009-05-19 20:06:21

0

100% высота - один экран высота. Если вы прокрутите вверх, он покрывает 100% высоты. Сделайте свои блоки масштабными, или, по крайней мере, переместитесь в центр экрана. Вы можете сделать это, установив верхнее и нижнее отступы в auto.

Кроме того, ваша головная бирка не закрыта должным образом. Проверьте this

+0

Да, я забыл про название в заголовке: Это либо я не понял этого права, либо просто добавление авто в нижний и верхний позиции не оказало никакого влияния. Спасибо за ваше время! – 2009-05-19 20:00:51

0

Ваша страница базируется исключительно на использовании высоты 100% для всех ваших Элементов. Если окно просмотра браузера пользователя достаточно велико, все в порядке; однако, если они изменят размер своего браузера, чтобы быть маленьким, ваша страница будет на 100% меньше, и все будет снижаться.

Посмотрите на установку минимальной высоты на одном из элементов контейнера. Это заставит вещи перестать изменять размер, если окно браузера опустится ниже этой высоты. Или вы можете установить простую старую высоту, достаточно большую, чтобы содержать флеш-кусок на одном из ваших элементов контейнера, и пусть другие наследуют от этого.

И, так как IE6 не поддерживает мин-высота (FF2 +, IE7, Safari все же), вам необходимо взломать его в like so.

+0

Благодарим вас за помощь, я обязательно это заметлю. – 2009-05-19 19:55:30