-
Делаю так
<div class='DIV1'>
<div class='DIV2'>
Content text goes here
</div>
</div>
Нужно чтобы сверху DIV2 отстоял на 10px от верха экрана но ОБА DIV'а были высотой на всю страницу:
.DIV1 {
height:100%;
min-height:100%;
padding-top:10px;
....
}
.DIV2 {
height:100%;
min-height:100%;
....
}
В FF 2.0.3 получается то что на рисунке:
1. Появляется полоса прокрутки справа (прокручивает ровно на 10 пикселей). /* в IE не появляется */
2. Фон DIV1 элемента "не дотягивает" 10 пикселей до низа(кончается в том месте где прокрутка начинается). А фон элемента DIV2 доходит точно до низа окна с учетом прокрутки.
Пробовал ставить DIV2 margin-top:10px и убрать паддинг из DIV1. Не помогло.
Нужен какой-то трюк :/
-
Ну, во-первых, мы наблюдаем ожидаемое поведение. Более того, если Вы укажите правильный !DOCTYPE (а это просто необходимо сделать, чтобы браузеры включились в стандартный режим рендеринга), Вы сможете лицезреть, что и IE начнет себя вести "правильно" – в нем тоже появится вертикальная полоса прокрутки.
Правильный !DOCTYPE выглядит так (например):
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Во-вторых, нет никакого смысла задавать одновременно для одного и того же элемента свойства height и min-height, т.к. height все-равно "перебьет" min-height – в Вашем случае свойства min-height не играют никакой роли.
Теперь о свойстве height. Поскольку оно у Вас работает, это может быть чревато. Попробуйте увеличить текстовый контент. Если блоку задается высота (height), при переполнении контентом такой блок (и его фон в частности) не будет растягиваться. Так что Ваши height: 100% – это не есть хорошо...
Почему появляется скролл? Да потому что в результате Ваших стараний суммарная высота блока div1 получается 100% от высоты body + 10px паддинга. Поскольку высота body у Вас скорее всего равна высоте элемента html (100%), а высота элемента html равна 100% от высоты окна браузера – получаем 10-пиксельный скролл. И от этого никуда не уйти. Такова блочная модель.
Вообще, вертикальное выравнивание блоков (да еще и при заданной в процентах высоте) – одно из самых больных мест в CSS. Единственный способ, с помощью которого решаются многие подобные Вашему случаи, – это метод [Only registered and activated users can see links. Click Here To Register...].
-
никогда не забывайте, что относительная высота для дочернего блочного элемента отсчитывается от его родительского блочного элемента!
