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


Партнерская программа Kredov

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

#1 PhotoShopRND

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

Отправлено 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
  • 2 165 сообщений
  • Репутация: 437

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

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


  • 0

#3 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 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

robot

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


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