Перейти к содержимому



Прижать футер к низу средствами css

#1 PhotoShopRND
PhotoShopRND
  • Пользователь
  • 209 сообщений
  • Репутация: 53
0

Обновлено 02 марта 2014 - 22:21  Отправлено 01 марта 2014 - 19:18

Вопрос к опытным верстальщикам, возможно ли прижать footer к низу:

 

Только средствами css, и без изменения html кода!

<html>  <body>    <div id="wrapper">  <div id="wrapper2">  <div id="wrapper3">       <div id="header"></div>       <div id="container">     <div id="container2">        <div id="left">      <div id="left-text">          </div>        </div>         <div id="content">        <div id="text">          </div>        </div>           <div id="right">      <div id="right-text">          </div>        </div>     </div>     </div>     <div id="footer"></div>    </div>  </div> </div>   </body>  </html> 

 

 

Сообщение отредактировал PhotoShopRND: 02 марта 2014 - 08:17

  • 0

#2 Ixman
Ixman
  • Пользователь PRO
  • 3 177 сообщений
  • Репутация: 850

Отправлено 02 марта 2014 - 10:23

Можно, используя позиционирование. На 100% как это сделать сказать не могу, так как не профи в вёрстке, но в помощь position и bottom 


  • 0


#3 yury
yury
  • Пользователь
  • 648 сообщений
  • Репутация: 195

Отправлено 02 марта 2014 - 11:10

Только средствами css, и без изменения html кода!

Без изменения сруктуры html трудно.

С изменением (если вынести футер за пределы общего блока) примерно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>tst</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css" /><!--[if !IE 7]>    <style type="text/css">        #wrap {display:table;height:100%}    </style><![endif]--></head><body><div id="wrap">    <div id="header">header    </div>    <div id="content">content    </div></div><div id="footer">footer</div></body></html>

style.css

*{    margin: 0;    padding: 0;}html, body {    height: 100%;}#wrap {    min-height: 100%;    background: #cfc;}#header {    background: #fcc;    height: 150px;}#content {    background: #cfc;    overflow:auto;    padding-bottom: 150px;}  /* отступ того же размера, что и высота футера */#footer {    background: #ccf;    position: relative;    margin-top: -150px; /* отрицательный размер высоты футера */    height: 150px;    clear:both;}/*Opera Fix*/body:before {    content:"";    height:100%;    float:left;    width:0;    margin-top:-32000px;/}

Сообщение отредактировал yury: 02 марта 2014 - 11:17

  • 0

#4 PhotoShopRND
PhotoShopRND
    Topic Starter
  • Пользователь
  • 209 сообщений
  • Репутация: 53

Отправлено 02 марта 2014 - 13:35

 

Без изменения структуры html трудно.

С изменением (если вынести футер за пределы общего блока) примерно так:

 

Вот в том то и дело, что все найденное в сети на эту тему, подразумевает вынос подвала за пределы контента. А в этом случае нужно что то другое.


  • 0

#5 Ринат
Ринат
  • Неактивные
  • 756 сообщений
  • Репутация: 50

Отправлено 02 марта 2014 - 15:17

А ссылки на ресурс нет?


  • 0
Создание и продвижение сайтов


#6 PhotoShopRND
PhotoShopRND
    Topic Starter
  • Пользователь
  • 209 сообщений
  • Репутация: 53

Отправлено 02 марта 2014 - 20:37

Есть, отправил в личку пароль для входа в админку.


  • 0

#7 Ринат
Ринат
  • Неактивные
  • 756 сообщений
  • Репутация: 50

Отправлено 02 марта 2014 - 21:17

Так у Вас там даже оформления нет. Или это у меня не отображает?


  • 0
Создание и продвижение сайтов


#8 PhotoShopRND
PhotoShopRND
    Topic Starter
  • Пользователь
  • 209 сообщений
  • Репутация: 53

Отправлено 02 марта 2014 - 21:42

Нет, его там действительно нет :) Так же проще, не разбираться в коде а написать с нуля то что нужно. В редактор css, пишите все что нужно :) оформление появится.


  • 0

#9 Ринат
Ринат
  • Неактивные
  • 756 сообщений
  • Репутация: 50

Отправлено 02 марта 2014 - 21:46

Я знаю как это делается, но бесплатно работать у меня не получается  :)  ;)


  • 0
Создание и продвижение сайтов


#10 PhotoShopRND
PhotoShopRND
    Topic Starter
  • Пользователь
  • 209 сообщений
  • Репутация: 53

Отправлено 02 марта 2014 - 21:53

Мне не нужен исполнитель, мне нужен совет, подсказка... все остальное я в состояние сделать самостоятельно :)


  • 0

#11 Ринат
Ринат
  • Неактивные
  • 756 сообщений
  • Репутация: 50

Отправлено 02 марта 2014 - 21:57

Мне не нужен исполнитель, мне нужен совет, подсказка... все остальное я в состояние сделать самостоятельно :)

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


  • 0
Создание и продвижение сайтов


#12 PhotoShopRND
PhotoShopRND
    Topic Starter
  • Пользователь
  • 209 сообщений
  • Репутация: 53

Отправлено 02 марта 2014 - 22:00

Накидал, дерзайте :)


  • 0

#13 Ринат
Ринат
  • Неактивные
  • 756 сообщений
  • Репутация: 50

Отправлено 02 марта 2014 - 22:09

Вам что-то типа этого?

.art-footer, .art-footer-text, .art-footer-text p {text-align: center;position: fixed!important;bottom: 0;

Если да, то идея ясна, а подгонка уже за Вами)))


Сообщение отредактировал Ринат: 02 марта 2014 - 22:10

  • 0
Создание и продвижение сайтов


#14 PhotoShopRND
PhotoShopRND
    Topic Starter
  • Пользователь
  • 209 сообщений
  • Репутация: 53

Отправлено 02 марта 2014 - 22:17

Не то пальто :) нужно, как в методе описаном в первых постах только с хедером вне контента.


  • 0

#15 Ринат
Ринат
  • Неактивные
  • 756 сообщений
  • Репутация: 50

Отправлено 02 марта 2014 - 22:21

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


  • 0
Создание и продвижение сайтов


robot
robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
Megoydagi Megoydagi 1-й за Август
Очков активности: 30 4 темы, 8 сообщений, 1 балл репутации
Сайт: bank.net.ru
ТОП самых активных за этот месяц
  • Фотография Vmir
    #1

    Vmir
    Очков активности: 24 3 темы, 7 сообщений, 1 балл репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 18 Вне конкурса за определение пользователя месяца

  • Фотография Totti
    #3

    Totti
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Фотография WGN
    #4

    WGN (worldgamenews.com)
    Очков активности: 12 1 тема, 5 сообщений, 1 балл репутации

  • Фотография SergiuS85
    #5

    SergiuS85
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография kuztoday
    #6

    kuztoday
    Очков активности: 10.5 1 тема, 4 сообщения, 1 балл репутации

  • Фотография mkreine
    #7

    mkreine (analiz-krovi.net)
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография Megoydagi
    #8

    Megoydagi (bank.net.ru)
    Очков активности: 9 Вне конкурса за определение пользователя месяца

  • Фотография kolver
    #9

    kolver
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография fedornabilkin
    #10

    fedornabilkin (plohoneponyal.ru)
    Очков активности: 7.5 1 тема, 2 сообщения, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru