Подскажите пожалуйста, в чём проблема? И как её решить!?
P.S. Заранее извиняюсь за "разбросанный код, вариант писался сугубо черновой, лишь для отладки положения слоёв, код не входило в мои планы. Благодарю за внимание!
| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > Вёрстка веб-сайтов > Высота слоя 100% |
| Автор: WolfAlone 15.10.2009, 19:13 |
| Доброго времени суток! Знаю, что вопрос растягивания "div'ов" на 100% по вертикали стоит давно, перечитал только что, всё что нашёл на этом форуме и груду инфы из других источников! Честно говоря, ничего толкового не нашёл, решил попробовать сделать что-то своё... Сварганил кое-как черновой вариант странички, набитый разнообразными кусками кода, в т.ч. JS, которая растягивается минимум на 100% окна браузера, работает в IE6/FF3.5/Opera10. И всё бы хорошо, да вот одно плохо, почему-то если один слой, растянут (например текстом) больше другого, то второй слой почему-то чуть короче предыдущего! Не знаю, как с этим бороться! Если слой "Контент" растянут - то слой "меню" тоже растягивается, но почему-то не полностью, т.е. он чуть короче слоя "контент". И как я не пробовал с этим бороться - ничего не получается! При обратных действиях (растягивание слоя "меню" [как в приложенном примере кода]) - картина аналогичная, т.е. слой "контент" тоже растягивается, только почему-то чуть короче чем слой "меню". Подскажите пожалуйста, в чём проблема? И как её решить!? P.S. Заранее извиняюсь за "разбросанный код, вариант писался сугубо черновой, лишь для отладки положения слоёв, код не входило в мои планы. Благодарю за внимание! |
| Автор: SamDark 15.10.2009, 19:26 |
| http://xhtml.ru/2005/12/12/body_height_research/ |
| Автор: WolfAlone 15.10.2009, 21:21 |
| Не помогло... |
| Автор: WolfAlone 15.10.2009, 21:55 | ||
Я в шоке!  Попробовал сделать вот такой вот код...
Только было обрадовался... Но радость быстро закончилась, как всегда, IE6 всё запоганил! Часть "Меню" и "Контент" в нём отображается почему-то где-то по середине страницы!!! Неужели нет способа без страшных "махинаций" сделать документ по шаблону: "хедер, меню/контент, футер"?? |
| Автор: bars80080 15.10.2009, 23:04 |
| а это не подойдёт? http://www.alexilin.ru/5-sovetov-po-html-i-css/ |
| Автор: WolfAlone 15.10.2009, 23:41 |
| http://www.alexilin.ru/5-sovetov-po-html-i-css/ - это тоже читал, не помогает! Посмотрите пожалуйста вложенный файл, вся загвоздка в том, что нужно сделать именно так: 1. Сверху хедер (заголовок), допустим, 100px; 2. Дальше слева идёт меню, справа от меню - слой для контента; Меню 200px; Контент всё оставшееся пространство; 3. Снизу должен идти футер (он же "подвал"), высотой допустим 50px; Проблема в том, что разнообразные хаки типа "подложить фоновую картинку" и пр. - не прокатывают! Нужно конкретно иметь 2 слоя одинаковой высоты! Если 1 слой растянулся до (допустим) 500px; то и второй слой (меню/контент) должен приобрести аналогичную высоту! Перепробовал всё, что приходило в голову... Результаты: а) Появлялась полоса прокрутки (на мой взгляд, совершенно неуместная, чуть ниже футера появлялось пустое место равное его высоте; б) Начал вёрстку на голых таблицах и всё бы хорошо, но... IE 6, 7 - отлично, даже FF норм! А Opera тупанула, и style="height:100%"; у таблиц - не понимает... в) Всё на своих местах, но футер начинается за видимой частью экрана, что бы его увидеть - необходима прокрутка... Не годиться! г) Находил ещё какое-то решение (уже не помню), но как всегда подвёл эксплорер! У него полоса прокрутки становилась бесконечной (вниз) В общем одним словом уже 4ые сутки перебираю всё, что попадается в Google и Яndex, а воз и ныне там... В прикреплённом в 1-ом посте файле - была попытка реализовать всё через JavaScript, но даже он не помогает! Элемент имеющий меньшую высоту (по заполнению) почему-то всегда чуть короче! Попытался переделать код, хотел сделать примерно так: если слой 1.высота > слой 2.высота { слой 2.высота = слой 1.высота; } в противном случае { слой 1 высота = слой 2.высота } Но даже тут меня постигла неудача... Как выяснилось, текущую высоту некоего элемента в браузере определить не представляется возможным... Я просто в ужасе! |
| Автор: bars80080 16.10.2009, 00:45 |
| как же всё просто получается, если не корячится со слоями, а сделать по человечески таблицей |
| Автор: Violator 16.10.2009, 11:58 |
| http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm |
| Автор: WolfAlone 16.10.2009, 17:22 |
| Всё бы хорошо, но в последнем примере - высота столбцов просто равная... Они не растягиваются на весь экран, если не заполнены контентом! Что есть не очень хорошо! |
| Автор: youri 17.10.2009, 10:03 | ||
что-то ТС таблицы не помогли |
| Автор: WolfAlone 17.10.2009, 20:37 |
| Скажите пожалуйста, эта задача вообще решаема? Можно как-нибудь сделать, например height:100%-150px для слоя? Через JS или на чистом CSS - не принципиально! Добавлено @ 20:38 Главное при этом ещё сделать 2 слоя одинаковой высоты! Только не псевдо высоты, с помощью фоновой подложки и пр. "махинаций", а именно одинаковой высоты? |
| Автор: youri 17.10.2009, 23:06 |
| по поводу сделать сайт по высоте минимум на 100% - http://cssplay.co.uk/layouts, по поводу столбцов одинаковой высоты - ссылка выше |
