Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > div внизу страницы

Автор: transat 10.12.2009, 04:35

такая структура:
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

Нужно чтобы слой footer всегда прижимался книзу страницы не зависимо от того есть ли текст в слое #body или нет. Если центр пустой либо заполнен не во всю высоту то бегунка не должно быть и footer должен быть внизу, а если текста больше чем высота окна то должен появляться бегунок соответственно и footer по прежнему должен быть внизу. position absolute не подходит т.к. footer будет внизу только когда отсутствует наполнение. если появляется бегунок то текст проходит под footerом а footerне двигается с места. Есть вообще решение данной проблемы?

Автор: FortMax 10.12.2009, 04:43

Цитата(transat @ 10.12.2009, 04:35

)

footer будет внизу только когда отсутствует наполнение. если появляется бегунок то текст проходит под footerом а footerне двигается с места. Есть вообще решение данной проблемы?

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

Автор: transat 10.12.2009, 04:57

есть футер высотой 70px. Если в боди текста много то он пройдет под футером а футер уже не будет внизу при прокрутке. вот этого и нужно как-то избежать. т.е. футер поднимается выше при прокрутке и страничка заканчивается текстом а не футером

Автор: FortMax 10.12.2009, 05:08

попробуйте футер поместить в боди и с помощью позиционирования прилепить его к низу, тогда он всегда будет находиться внизу боди

Автор: bars80080 10.12.2009, 11:18

судя по всему он это хочет http://www.alexilin.ru/5-sovetov-po-html-i-css/

Автор: transat 10.12.2009, 14:05

Цитата(bars80080 @ 10.12.2009, 11:18)

судя по всему он это хочет http://www.alexilin.ru/5-sovetov-po-html-i-css/

сделал как написано и все равно не так как нужно. если в #body пусто, то footer улетает наверх к #body. а нужно чтобы всегда был внизу

Автор: bars80080 10.12.2009, 15:41

что-то вы делаете не так. от #body это не должно зависеть никак

Код


<html>
   <body>
      <div id="content">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
         <div id="before_footer"></div>
      </div>
      <div id="footer"></div>
   </body>
</html>

Код


html {height:100%}
body {height:100%}
#content { min-height:100%; }
#footer { height: 40px; margin-top:-40px; position:relative; }
#before_footer { height:40px; clear:both; }
* html #content { height: 100%; }

у вас так или иначе?

Автор: transat 10.12.2009, 15:46

html вот такой если без внутренностей

<html>
   <body>
       <div id="header"></div>
       <div id="body">
           <div id="before_footer"></div>
      </div>
      <div id="footer"></div>
   </body>
</html>

Автор: bars80080 10.12.2009, 15:49

видать у вас какие-то внутренности шибко активные. они вероятно и сносят нужные стили

Автор: transat 10.12.2009, 15:54

Попробую сделать без внутряков. Если заработает то буду искать ошибку внутри

Автор: transat 10.12.2009, 19:41

Переписал все без внутренностей. Все дело походу в #header. он у меня 120px в высоту. а у #body раз стоит min-height:100% то при отсутствии текста в #body #footer съезжает вниз еще на 120px. Как этого избежать?

Автор: transat 11.12.2009, 00:21

Додумался уже сам smile

опытным путем.

Автор: transat 11.12.2009, 00:38

Рано обрадовался smile

Если вставляю длинный текст или полностью убираю его то все прекрасно. а если вставляю чуток текста то сразу появляется бегунок. Притом только если вставляю блочные элементы вроде <p>. если просто текст то все норм. Как это исправить пока не придумал

Автор: Mavrun 20.12.2009, 12:35

По прижатию футера постоянно использую схему, описанную http://shublog.ru/html-and-css/kak-prizhimat-podval-k-nizhnejj-chasti-brauzera/. Пока сбоев не давала