-
Vika0
0
Из правила:
"Если высота содержащего блока не специфицирована явно (т е. зависит от высоты содержимого), значение интерпретируется как 'auto'. "
"Проценты высчитываются относительно высоты содержащего блока генерируемого бокса."
Задача:
BODY должно занимать видимую часть экрана при малом контенте, а при большом контенте растягиваться до концы страницы т.е. по контенту (height:auto;).
При этом ОБЯЗАТЕЛЬНО! внутренний блок в BODY тоже должен при малом контенте заполнять всю видимую часть экрана а при большом контенте до концы страницы. Т.е. внутренний блок должен отслеживать высоту "резинового" BODY. Как-бы height:100% относительно BODY
Предпосылка:
IE не рассматриваем вообще!
Поведение BODY хорошо исследовано на стр.:
http://xhtml.ru/2005/12/12/body_height_research/
Воспольземся результатом.
html {height:100%}
body {
margin:0;
padding:0;
height:auto !important;
min-height:100%;
}
Все действительно хорошо выглядит, но ...
Проблема:
Внутренний блок не воспринимает теперь такие правила:
height:100%;
height:100% !important;
min-height:100%;
min-height:100% !important;
работает в 'auto' или с фиксированным значением в пикселах.
Это поведение внутреннего блока не позволяет мне решить задачу не прибегая к таблицам.
Вопрос:
Знает ли кто решение задачи без использования таблиц?
-
Vika0
0
Sory!
Забыла сообщить в предпосылках:
У элементов HTML и BODY разные фоновые рисунки. Это очень важно!! -
Все, что я про это знаю, написал как-то вот тут: http://softwaremaniacs.org/forum/web/348/
Подойдет?
-
Vika0
0
О!!
Знаменитиый стакан. Мне самой он очень нравится. Удобная вещь!
Правда, несколько подпортил впечатление один "популярный" браузер. Как мне кажется, тогда я могла не угадать с z-index'om. А в друг в том незнакомом мне коде уже что-то лежало на уровне моего абс. блока? И как в IE6 это влияет на положение абс. блоков - я не знаю.
Даже в случае "стакана Сагалаева", к сожалению, задача не решается снова.
Ваш блок #main - есть аналог моего внутреннего блока. А он не заполняет пространства до конца страницы, по той причине, что не воспринимает значений высоты своего родителя и находится в режиме 'auto'.
Как, я понимаю:
Источник проблемы возник изначально, когда фоном разделили html и body.
В этом случае 100% html - это видимая часть окна и всё. Чтобы тянуть body дальше к низу мы переключаем его в режим auto - по контенту.
Но тут вот что - хотя браузер знает положение блока или боди и отрисовывает их на экране правильно, но в поток передать значения высоты в режиме "авто" жадничает. Получается что, для внутреннего блока высота в % будь то
height:100%;
height:100% !important;
min-height:100%;
min-height:100% !important;
неопределяется из принцмпа, потому что нет данных о высоте родителя. В режиме "авто" просто нет значений высоты.
Что нужно: (ну многа букафф )
Дизайнер задумал графически связанные элементы
НТМЛ - фон вода
БОДИ - фон неба только в ТОП и репит по Х
DIV - внутренний контейнерный блок с собственным отличающ. фоном, графически "перетекающим" в фон НТМЛ. Резина по У и резина с ограничениями мин/мах по Х.
Нижний блок - либо в боди, либо в контейнере - фон дна.
Заморочка. Но внутренний блок контейнер надо тянуть по всей высоте. Заполнить все пространство экрана вне блока 2-мя разными фонами вода/небо и еще придумать переходные элементы от внешнего фона к рисунку блока. т.е. еще 2 элемента справа и слева блока с тянущимися по высоте вдоль внутреннего блока фонами.
Ух.
Кажется, пока писала, решилась на таблицу.
-
Vika0
0
Вообще то ваш код, Иван - лучший вариант для Футера. BODY не висит посередине и все на месте. И в особенности html может иметь свой, а body свой фон.
Я так подумала, а что собс-но мне от блока #main то нужно? Только его фон протянуть до конца страницы. А сам он пусть и остается "по контенту".
Можно ли комбинацией отступов протянуть фон #main до ниж. конца страницы и не заполучить г-на Скролла? -
Vika, а может быть хотя бы примерно покажете макет?
-
Vika0
0
А как?
-
Или copy-paste'ом, или выложите где-нибудь и ссылку дайте.
(В прошлое сообщение еще не успел вчитаться, но с макетом все легче будет).
-
Vika0
0
-
Vika0
0
Ау !!!
Все молчат.
Или очень сложно или совсем просто? -
Так, кажется я вчитался...
Вика, вы все хотите, чтобы именно блок с контентом (#main в моем примере) обязательно тянулся вниз до футера. Но если я правильно понимаю, на самом деле вам нужен просто еще один контейнер для фона. Если да, то совершенно не обязательно делать это в #main.
В том моем примере роли у контейнеров такие:
- html: подложка окна, высота 100%
- body: стакан для отнесения футера вниз, высота уже auto
- #main: контент, растягивающий body после min-height
Важно тут то, что последние два элемента уже не имеют высоты 100%. А вот перед ними можно насажать любое число дополнительных контейнеров с высотой 100%, чтобы держать фоны:
- html: подложка окна, высота 100%
- body: контейнер для фона, высота 100%
- div1: контейнер для фона, высота 100%
- ...
- divN: контейнер для фона, высота 100%
- #container: стакан для отнесения футера вниз, высота уже auto
- #main: контент, растягивающий body после min-height
Правда, на практике я ничего этого не проверял, возможно я что-то упускаю, из-за чего это не может работать.
-
Отщеплен новый топик "!important в IE6".
-
Vika0
0
Вчера всю субботу опять мучилась с раскладкой.
Рисунок раскладки теперь здесь:
http://ur-g.com/test/layout.gif
Испробовала ваш вариант со слоями бакграундами.
При большом контенте, все бакграунты "висят" на уровне визуальной часть окна. Потому, что все они 100% от НТМЛ т.е. не больше визуального размера окна. :-((
#container просто вываливается из фоновых слоев. А #main уже не отрабатывает min-height.
Если растягивать какой либо div1 ... divN, то теряем футер при малом контенте (min-height сбрасывает связь по высоте с блоком-ребенком).
Ну почему браузер знает как отрисовать на экране блок "по контенту", но не хочет сообщить мне положение нижней границы этого блока?
Как только блок переходит на min-height или auto , то никаких слоев с фонами, ни вне, ни внутри использовать невозможно.
Парадоксальная ситуация - единственный браузер, который делает так, как я хочу - это тот, который только на половину поддерживает CSS. :-(
Иван, я уверена, что вы же знаете выход.
-
Испробовала ваш вариант со слоями бакграундами. При большом контенте, все бакграунты "висят" на уровне визуальной часть окна. Потому, что все они 100% от НТМЛ т.е. не больше визуального размера окна. :-((
Ага... А если тогда сказать последнему div'у с
height: 100%:{ height: 100%; overflow: auto; }По идее, тода контент будет не вываливаться из него, а скролиться внутри него. Визуально это будет тот же скроллер, что у окна, но фон будет внутри по всему контенту.
Ну почему браузер знает как отрисовать на экране блок "по контенту", но не хочет сообщить мне положение нижней границы этого блока?
Потому что он хочет знать размеры блоков, от которых зависит какая-то другая раскладка, до того, как загрузит контент. Чтобы сраница не "прыгала" при загрузке. Это не всегда удобно, но это один из основных принципов CSS.
-
Vika0
0
Ужас.
Проблема с фонами BG14 и BG41.
Все в скролах.
Как то это не то.
Неужели этот макет какой-то необычный? Вроде, никаких особых претензий по дизайну нет. Стандартное, можно сказать, графическое решение.
Получается, что этот "ничего такой" макет не раскладыватся средствами CSS?
А тут еще дизайнер начал говорить о прозрачном футере (чтоб видеть фон НТМЛа) .., так я чуть со стула не упала.
Я не топ-кодер, и могу всего не знать. Но если возможности CSS настолько ограничены, то может стоит попробовать таблицу?
Пока мне не предложили сменить работу из-за недостатка квалификации. :-)
-
Вик, на самом деле CSS действительно неподходящий инструмент в случаях, когда нужны жесткие растяжки по высоте. Поэтому да, таблицы справятся лучше.
А "топовость" тут правда ни при чем :-). Микроскопом трудно забивать гвозди, а молотком трудно разделять бактерий в чашке Петри :-).
P.S. Расскажите дизайнеру, чтобы не рисовал таких макетов. Честное слово, сайты из жестких колонок, прилепеленных футеров и прочей атрибутики табличной верстки уже сто лет как не модны. Вот для вдохновения: http://cssvault.com/
-
Vika0
0
Спасибо!
Вы очень мне помогли. И был повод лучше изучить некоторые особенности CSS. -
Vika, посмотрите вот эту статью с Хабрахабра и, соответственно, пример
Внимание! Это довольно старый топик, посты в него не попадут в новые, и их никто не увидит. Пишите пост, если хотите просто дополнить топик, а чтобы задать новый вопрос — начните новый.