Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как, все же, пржать footer к низу, Надо разобраться.. 
:(
    Опции темы
WebMast
Дата 6.2.2009, 09:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Front-end developer
*


Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2
Не надо на меня ругаться и кричать, мол иди в google. Просто я устал, столько решений по этой проблеме. И не нашел ни одного кроссбраузерного! Может вы поможете? Сейчас я использую таблицы, мало кода, css почти нету. Вот сами посудите:
Код

<table border="0" style="height:100%;">
  <tr>
    <td style="height:98%;">
      <div id="main">123</div>
    </td>
  </tr>
  <tr>
    <td style="height:2%;">
      <div id="footer">123</div>
    </td>
  </tr>
</table>

Предложите решение, которое реализовано с помощью div. Но обязательно кроссбраузерное.. Заранее спасибо!
--------------------
Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome
PM MAIL WWW Skype   Вверх
bars80080
Дата 6.2.2009, 10:34 (ссылка) | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
вот отличное кроссбраузерное решение http://www.alexilin.ru/5-sovetov-po-html-i-css/
PM MAIL WWW   Вверх
WebMast
Дата 6.2.2009, 11:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Front-end developer
*


Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2
Спасибо.. Только еще, не мог бы ты объяснить мне для чего #before_footer. Если нужна высота, то без нее ничего не изменилось. Если clear:both, то почему не <br clear="all" />?
--------------------
Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome
PM MAIL WWW Skype   Вверх
InfMag
Дата 6.2.2009, 13:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


…
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: нет
Всего: 4
Предупреждаю, таким способом делал я, но IE7 это браузер совершенно автономный от IE6 и там был косяк!
PM   Вверх
Violator
Дата 6.2.2009, 15:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15
WebMast, 
высоту ставят чтобы контент не лез под футер, clear в данном случае не нужен, но понадобится, когда в контенте будут использоваться блоки с float
PM MAIL   Вверх
bars80080
Дата 6.2.2009, 16:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
Цитата(InfMag @  6.2.2009,  12:41 Найти цитируемый пост)
таким способом делал я, но IE7 это браузер совершенно автономный от IE6 и там был косяк! 

там же и написано, как избавиться от косяка в ИЕ6. 

(хотя согласен, непонятно, почему они не добавили эту строчку в код)
я имею ввиду после #content:
Код

* html #content {height:100%}
PM MAIL WWW   Вверх
WebMast
Дата 7.2.2009, 17:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Front-end developer
*


Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2
Из всего я понял одну вещь. Чо пока IE не подвинулся до уровня Мозилы и Оперы, лучше использовать таблицы. Кому надо решение, обращайтесь!

Конечно и тот вариант нормальный, но с использованием хаков.
--------------------
Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome
PM MAIL WWW Skype   Вверх
WebMast
Дата 15.2.2009, 14:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Front-end developer
*


Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2
Вот хороший вариант. bitby.net/web/kak-prizhat-podvalfuter-k-nizu
--------------------
Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome
PM MAIL WWW Skype   Вверх
Violator
Дата 15.2.2009, 16:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15
через позиционирование
Код

<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
    html {height:100%}
    body {height:100%;margin:0;padding:0}
    .container {position:relative;min-height:100%;height:auto !important;height:100%}
    .content {padding-bottom:60px}
    .footer {width:100%;height:60px;position:absolute;bottom:0}
  </style>
</head>
<body>
  <div class="container">
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>
PM MAIL   Вверх
fromXiper
Дата 17.2.2009, 00:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 8
Регистрация: 12.2.2009

Репутация: нет
Всего: нет
Кроссбраузерное решение смотрите в статье HTML и CSS приемы

Это сообщение отредактировал(а) fromXiper - 20.3.2009, 12:10
PM MAIL   Вверх
turing
Дата 19.11.2009, 11:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 27
Регистрация: 5.11.2008

Репутация: нет
Всего: нет
Есть проблемка с этим известным методом cssstickyfooter.com. Когда для html или body задана картинка в качестве фона, то она обрезается на уровне 100%, то есть на высоте окна браузера, а ниже идёт просто цветовой фон. Это происходит, конечно же, только когда контента больше, чем на одно окно.

Пример можно посмотреть: http://tohas.info/dao/

Есть мысли, как обойти?
PM MAIL   Вверх
blah
Дата 19.11.2009, 18:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17
turing, 
у вас для html и body задана высота. Бекграунд за пределами элемента продолжаться не может.
Задайте этот бекграунд для #wrap и не задавайте для него ширину. Т.е. придется вставить во #wrap еще 1 блок c magrin:0 auto; , width:1000px; и position:relative;
PM MAIL ICQ   Вверх
turing
Дата 20.11.2009, 00:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 27
Регистрация: 5.11.2008

Репутация: нет
Всего: нет
А position: relative зачем?
PM MAIL   Вверх
blah
Дата 20.11.2009, 02:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17
Хороший вопрос smile. У вас так в стилях написано.
PM MAIL ICQ   Вверх
NDenis
Дата 20.11.2009, 11:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8
Я использовал этот вариант http://www.cssstickyfooter.com/using-sticky-footer-code.html.
Правда на английском языке, но разобраться в коде проблемы не должно составить.
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.1103 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.