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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

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

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

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

    WGN (worldgamenews.com)
    Очков активности: 81 Вне конкурса за определение пользователя месяца

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

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

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

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

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

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

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

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

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

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

  • Фотография Алексей111
    #9

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

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

    fedornabilkin (zaka4ano.ru)
    Очков активности: 24 0 тем, 4 сообщения, 4 балла репутации

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

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 24.09.2018
Топ 5 участников по репутации


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

#1 PhotoShopRND

PhotoShopRND
  • Неактивные
  • 209 сообщений
  • Репутация: 53
0

Отправлено 01 March 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 March 2014 - 08:17

  • 0

#2 Ixman

Ixman
  • Пользователь PRO
  • 2882 сообщений
  • Репутация: 738

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

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


  • 0


#3 yury

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

Отправлено 02 March 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 March 2014 - 11:17

  • 0

#4 PhotoShopRND

PhotoShopRND
    Topic Starter
  • Неактивные
  • 209 сообщений
  • Репутация: 53

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

 

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

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

 

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


  • 0

#5 Ринат

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

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

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


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


#6 PhotoShopRND

PhotoShopRND
    Topic Starter
  • Неактивные
  • 209 сообщений
  • Репутация: 53

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

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


  • 0

#7 Ринат

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

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

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


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


#8 PhotoShopRND

PhotoShopRND
    Topic Starter
  • Неактивные
  • 209 сообщений
  • Репутация: 53

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

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


  • 0

#9 Ринат

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

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

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


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


#10 PhotoShopRND

PhotoShopRND
    Topic Starter
  • Неактивные
  • 209 сообщений
  • Репутация: 53

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

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


  • 0

robot

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


Похожие темы

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

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