Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 13.07.2015, 11:50   #1
zaki
Пользователь
 
Регистрация: 06.05.2011
Сообщений: 75
По умолчанию Прижать картинку к низу div

Да-да, заезженный вопрос)

Есть 3 section

Код HTML:
<section id="header">
</section>

<section id="page">
      <img src="./img/pic.png" class="pic-bottom">
</section>

<section id="footer">
</section>
css

Код HTML:
#page {
      position: relative;
}
#page .pic-bottom {
      position: absolute;
      bottom: 0;
}

#footer {
      position: absolute;
      bottom: 0;
}
В чем задача - прижать пикчу к низу div, проблема в том, она прижимается к самому низу документа, заезжая за футер.

Я думаю, что это из за того, что я не указал высоту #page. Как то можно без указания высоты, прижать картинку к низу блока, не заезжая за футер? Или мне везде указать ширину в процентах?
zaki вне форума Ответить с цитированием
Старый 13.07.2015, 18:27   #2
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
Восклицание Название темы не соответствует приведенному коду

>>> В чем задача - прижать пикчу к низу div
Тут в коде нету div... Зачем-то секции используются. Семантика?
Вы, в принципе правильно задали стили. Так работает:
Код HTML:
<!DOCTYPE HTML>
<head>
<meta charset="windows-1251">
<title>tmp</title>
<style>
#header {background:skyblue;}
#page {
  position:relative;
  background:orange;
}
#page .picBottom {
  position:absolute;
  bottom:0;
}
#footer {
  position:absolute;
  bottom:0;
  background:green;
}
</style>
</head>
<body>
<section id="header">111111111
</section>

<section id="page">
  <br><br><br><br><br><br><br><br><br><br><br>
  <img src="http://programmersforum.ru/image.php?u=311137&dateline=1421676338" class="picBottom">
</section>

<section id="footer">333333333333
</section>
</body>
</html>

Последний раз редактировалось SQLPowerUser; 13.07.2015 в 18:51.
SQLPowerUser вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
прижать блок к правому краю с обтеканием ! Morgusha HTML и CSS 3 30.07.2013 18:54
Прижать левый блок к центру CSS FleXik HTML и CSS 3 09.06.2013 16:07
DIV.Как разместить картинку? ДавидДавид HTML и CSS 1 22.02.2013 11:14
Прижать подвал kuba1981 HTML и CSS 3 17.10.2012 20:07
Прижать блок к правому краю родителя Gorkiy HTML и CSS 1 24.07.2012 11:31