VPF::Не прижимается футер к низу. - Форум программистов

Pierre

Дата 8.4.2016, 21:05 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 24
Регистрация: 3.10.2015

Репутация: нет
Всего: нет

Не могу понять почему не прижимается к низу футер. Кто может подсказать почему способ с позиционированием не хочет работать?

HTML

Код


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div class="panel"></div>
    <div class="wrapper">
        <div class="content"></div>
    </div>
<div class="footer"></div>

</body>
</html>

css

Код


* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0;
}

html, body {
  height: 100%;
}

.panel {
  width: 100%;
  height: 100px;
  background: red;
}

.wrapper {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 300px;
  height: 100%;
}

.content {
  height: 1500px;
  background: lawngreen;
}


.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 300px;
  background: lightgreen;
  width: 100%;
}

.container {
  position: relative;
  height: 100%;
}

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

Pierre

Дата 9.4.2016, 08:33 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 24
Регистрация: 3.10.2015

Репутация: нет
Всего: нет

решил сам, обернул весь контент кроме футера в доп див и ему задал min-height 100% c position relative

html

Код


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="container">
    <div class="panel"></div>
    <div class="wrapper">
        <div class="content"></div>
    </div>
    <div class="footer"></div>
    </div>
</body>
</html>

css

Код


.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 300px;
  background: lightgreen;
  width: 100%;
}

.container {
  position: relative;
  min-height: 100%;
}

Это сообщение отредактировал(а) Pierre - 9.4.2016, 08:34

Pierre

Дата 9.4.2016, 10:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 24
Регистрация: 3.10.2015

Репутация: нет
Всего: нет

прокатило только для хрома)) на остальных - печаль беда)

Добавлено через 37 секунд
все еще актуально ( кто подскажет то?

ksnk

Дата 9.4.2016, 12:58 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Наиболее универсальный - вот. Для этого придется менять разметку - футер вынести под контейнер и обернуть это хозяйство еще одним дивом.

можно почитать про flex - это наиболее простой способ, менять ничего не придется, кроме стилей, но на старых броузерах не прокатит.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Pierre

Дата 9.4.2016, 21:41 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 24
Регистрация: 3.10.2015

Репутация: нет
Всего: нет

Цитата(ksnk @ 9.4.2016, 12:58)

Спасибо за совет, учту на будущее, решил конечно другим способом, и работает как часы)

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »