HTML+CSS+JavaScript

Подскажите как сделать: Есть див, который всегда должен быть в низу страницы. Кроме этого, он должен немного заезжать под контент, который расположен выше. Я сделал как умел - а оно в FF не отображает дно вообще, а в IE7 дно сползает в самый верх контента.

Вот примерный код:

<div id="all_content"> </div> <div id="all_bottom"> </div>

И стили:

#all_content     {     height: 100%; } #all_bottom     {     clear: both;     width: 100%;     height: 329px;     position: relative;     top: -150px;     margin-bottom: -150px;     z-index: -1; }

а ты не пробовал упростить?

/* это для оперы и ФФ */ html {height:100%;} body { height:100%; } #all_content     {     height: 100%; } #all_bottom     {     width: 100%;     height: 329px; }

И что это даст? Повторюсь: мне нужно, чтобы это див всегда был в низу, да еще и заезжал немного под верхний блок. Проблема еще в том, что блок #all_content не растягивается по высоте почему-то. Даже если ему указать height 100%, то если вывести от него бордеры, он будет в линию.

<div id="all_content"> &nbsp; </div> <div id="all_bottom"> &nbsp; </div>

так пробовал?

да, кстати, ты не могбы выложить иллюстрацию по теме?

http://www.cssstyle.ru/article/exampl/freim.html

http://www.dynamicdrive.com/style/layouts/category/C11/

Весь контент при этом должен быть тоже в диве с absolute и z-index, большим, чем у подложки.

Видимо, я не правильно выразился. Я имел ввиду, что дно не внизу экрана, а внизу страницы. Иллюстрация по теме в аттаче. Я не знаю уже что с этим делать.

Нужно, чтобы дно было снизу. Дно - это и нижний градиент тоже. Соответственно, нужно, чтобы градиент немного залезал под контент.

в соседней теме человека не туда послал :(
это тебе нужно http://www.themaninblue.com/experiment/footerStickAlt/

Тут особой проблемы тоже нет, только скриптом надо контролировать размер при ресайзе.

Сначала выводится страница со всем контентом (иначе как же мы узнаем его размеры?). Контент при этом в конструкции:

div   div - скелет   div - content /div Footer

Сначала ничто не абсолютное, размеры скелета - 0, Затем ставим скелет под размеры контента минус высоту, на сколько надо наезжать на футер. Контент превращаем в absolute.

Хотя... Может, бы и про футер неправильно выразились?

all_bottom должен:
1) не висеть в воздухе
2) быть немного под (по оси z) вышестоящими блоками

Если я не ошибаюсь, то выложенный мной пример работает в IE6 и Opera8.

Скриптами решать такую проблему, имхо, последнее дело. Должно быть решение при помощи CSS. Я верю в это!

Если размер контента или хотя бы самой нижней её части фиксирован, то да - вешаем её сверху через absolute. Но если такого участка выделить нельзя, то выше описал.
1),2) - описание выше не противоречит. Футер не абсолютный.

Размер контента, конечно, изменяется постоянно, так что через absolute не катит.
Правило, которое я где-то видел
bottom: 0px; при absolute - тоже не пашет.

Люди, залезьте пожалуйста в мой исходник и поправьте стиль для all_bottom. По-ходу, это все, что нужно. Просто, я не знаю как это сделать самому. :(

что с табой случилося?
ну красиво, молодец.

автор: AlexSol   (30.01.2007 в 16:59)   это тебе нужно http://www.themaninblue.com/experiment/footerStickAlt/

Блин, действительно... вот что значит - работать сутками. Уже не соображал. Выспался - и все разобрал : ) Спасибо большое, народ.

ЗЫ. Единственное, что - все равно у меня не отображается дно в FF. Ну да фиг сним! Подлый лис мне никогда не нравился. Главное, теперь в обоих IE и Опере отображается грамотно. Спасибо большое всем.

Нужно было дописать:

html, body { height: 100%; } HTML #container {  position: relative;  min-height: 100%;  height: auto !important;  height: 100%;  }

Мдя... нужно срочно учить зачем нужно писать первое, как определяется загадочное auto, что такое !important.