Меню
Что нового?

height:100%, DIV & footer

crocodile2u

crocodile2u

http://vbolshov.org.ru
height:100%, DIV & footer

Сразу оговорюсь: вопрос задаю сугубо из интереса, никакой реальной подоплеки нет.

Имеем следующее: на странице есть подвал, который необходимо прижать книзу при любой высоте контента. Если использовать таблицы, проблем нет, и это уже обсуждалось многократно. А вот если мы, повинуясь веяниям высокой моды :) (ну и удобства, конечно), хотим отказаться от таблиц как от элемента верстки? И использовать DIV'ы? В общем, я пробовал несколько вариантов. Они либо не срабатывают так, как нужно (подвал поднимается вверх при небольшой высоте контента), либо (если использовать абсолютное позиционирование) начинаются глюки при большой высоте контента (подвал залезает на контент).

Если для этой проблемы есть адекватное решение, может, кто-нибудь поделится?
 
Я делал так:
сначала задавал html, body{height: 100%; margin: 0}
Затем создавал div который будет включать в себя страницу и ставил ему высоту 100% и позишн: релатив. А внутри него абсолютно прижимал подвал к низу. так же создавал пустой див высотой равной высоте подвала - это чтоб подвал не заезжал на текст. ну, вобщем-то и сё. Работало во всех смотрелках.
 
Это я уже пробовал. Действительно, работает в IE и Opera. В моем любимом Firefox - нет.
 
crocodile2u
Для мозилл надо указывать не height: 100% на div.overall, а min-height: 100%. Например, так:
Код: 
  div.overall {
    position:relative;
    width:100%;
    min-height: 100%; /* IE проигнорирует */
  }
  * html div.overall { /* хак для IE */
    height:100%;
  }
Иначе при уменьшении окна див тоже сжимается.
 
SelenIT
О! Я вот нутром чуял, что этот самый min-height как-то можно применить (кстати, топик запостил, когда увидал вот это обсуждение: http://phpclub.ru/talk/showthread.php?s=&threadid=74081 ). Нутром чуял, а как конкретно применить, не додумался :-)

Спасибо за науку!
 
Можно-то может и можно. Но SelenIT'овский вариант грамотнее. Ибо нефик несуществующие свойства декларировать.
 
[offtop]
а еще можно вот так:
// style: 10px; /*проигнорируют все , кроме ie*/

например:
width: 100%;
// width: 90%;

у всех будет по 100%, а у ie 90%
[/offtop]
 
Loshadka, уточни плз: это работает для всех версий IE? Знаю, что "особенности" интерпретации комментариев используются для разделения IE5 и IE6, но вот такого варианта, честно говоря, сам не встречал.

crocodile2u, выражаю встречную благодарность - благодаря этому топику узнал, что это работает и в quirks mode (раньше думал, что только в ражиме соответствия стандартам...) ;)
 
SelenIT
честно, не знаю... в 6 - точно

з.ы. сам совершенно случайно на это наткнулся, просто поставил комментарий по привычке...
 
Что ж, тоже интересно. Я, правда, предпочитаю для IE использовать conditional comments
 
"О! Я вот нутром чуял, что этот самый min-height как-то можно применить (кстати, топик запостил, когда увидал вот это обсуждение: http://phpclub.ru/talk/showthread.p...;threadid=74081 )."

А может вы теперь в том обсуждении поможете? :) а то я уже вешаться готов :)
 
Войдите или зарегистрируйтесь для ответа.
Сверху