Как прижать футер к низу?

[Gem01983]

А вот кто тут у нас с вордпрессом дружит?

Собственно, задача в заголовке. Как прижать?)
Погуглил, но не получилось ничего из того, что нагуглил.
Или ничего не меняется, или футер уезжает в центр страницы и там и остается.

Помогите советом плиз!

[Johnny Cash]

Ссылку на сайт плиз! Посмотрим!

[Richman]

В смысле прижать?
Какой шаблон используете?
Обычно футер всегда внизу и не центрируется.

Самый простой вариант это выбрать другой похожий шаблон, но с нужным футером либо шаблон с гибкими настройками через панель.

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

[Gem01983]

Сообщение от Johnny Cash

Ссылку на сайт плиз! Посмотрим!

Воть
mo81.ru


Проблема видна, например, вот на этой странице
[Только зарегистрированные и активированные пользователи могут видеть ссылки]

Сообщение от Richman

Какой шаблон используете?
Самый простой вариант это выбрать другой похожий шаблон, но с нужным футером либо шаблон с гибкими настройками через панель.

Понятия не имею, какой там шаблон. Но менять его на другой низя.

[Richman]

Сообщение от Gem01983

Проблема видна, например, вот на этой странице
[Только зарегистрированные и активированные пользователи могут видеть ссылки]

Текста мало, поэтому футер "поднялся".
Добавьте "энтеры" или "пустые" абзацы и футер "опустится".

[Gem01983]

Сообщение от Richman

Текста мало, поэтому футер "поднялся".
Добавьте "энтеры" или "пустые" абзацы и футер "опустится".

Ну ок, тогда получится, что на маленьком мониторе до футера скролить нужно будет, а на большом опять он не прижат будет, да?

[Richman]

Ну в таком случае, у вас на нескольких страницах проблема с футером на мониторе 19 д. Я то думал, что только на одной странице такая проблема, проверял на 15д.

[Gem01983]

Сообщение от Richman

Ну в таком случае, у вас на нескольких страницах проблема с футером на мониторе 19 д. Я то думал, что только на одной странице такая проблема, проверял на 15д.

Верно!
Теперь, когда с этим определились - мой вопрос в силе - как сделать, чтобы футер прижат к низу был?

[Johnny Cash]

Проблема связана с тем, что на странице не хватает контента, поэтому он и не прижат внизу страницы.

Первый вариант, самый простой, это добавить пару пустых блоков в верстку страницы, и на этом проблема решится. Думаю тема то не древняя и можно добавлять блоки. Если нет, можно пробелами забить, но это не лучший вариант...

Второй вариант тоже довольно простой, это добавить для футера

margin-top

было:

footer {
    background: #007da7 url(../img/footer-bg.png) no-repeat center center;
    background-size: cover;
    padding-top: 25px;
    padding-bottom: 15px;

Стало:

footer {
    background: #007da7 url(../img/footer-bg.png) no-repeat center center;
    background-size: cover;
    padding-top: 25px;
    padding-bottom: 15px;
    margin-top: 360px;

около 300px, плюс минус. Но на других страницах там где есть контент, будет небольшой пустой пробел, фото ниже:



Так на странице где мало контента:



Третий вариант, это заменить footer на блоки div или другие элементы, но для этого потребуется править стиль.

Четвертый вариант, смотреть настройки темы, мб там есть возможность прижимать футер или делать отступ (в какой-то теме сталкивался с таким).

Далее вариант 5) Можно идти новым вариантом, и сделать body position:relative, а footer'у absolute и приклеить его к самому низу (довольно кривой способ, но сойдет):

body {
        position: relative;
        padding-bottom: 58px;
        box-sizing: border-box;
        }
.footer {
        position: absolute;
        bottom: 0;
        height: 58px;
        }

Можно делать и так при помощи псевдоэлемента :after:

.content {
                min-height: calc(100% - 58px);
                margin-bottom: -58px;
            }
            .content:after {
                content: '';
                display: block;
            }
            .content:after, .footer {
                height: 58px;
            }

Ну и самый актуальный вариант это при помощи flex, но работает только в современных браузерах:

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
}
.main {
  flex-grow: 1;
}

Вот здесь показано на примере как это сделано при помощи flex - [Только зарегистрированные и активированные пользователи могут видеть ссылки] !

Можно еще и через css сделать, но надо смотреть что у вас там за тема стоит, и есть ли она вообще или вы сами пилите сайт без нее)

А вообще конечно на всех страницах сайта должно быть достаточно контента, и для пользователя, ну и в данном случае для футера тоже))

[Gem01983]

Сообщение от Johnny Cash

Проблема связана с тем, что на странице не хватает контента, поэтому он и не прижат внизу страницы.



А вообще конечно на всех страницах сайта должно быть достаточно контента, и для пользователя, ну и в данном случае для футера тоже))

Уфф... Пару дней собирался с мыслями)))
По поводу вариантов с пустыми блоками, большим количеством контента - не совсем хочется.
Хочется, чтоб было универсально. Чтоб нормально смотрелось и на мониторе 15" и на 27", на старых браузерах и на новых.
Тем более, что контент высасывать из пальца - та еще задача. А сайт - как видите, для конторы. Там сказали - нужен сайт. А инфу дать - ой ну напишите что-нибудь. И вот мой друг на себе волосы рвет, что ж там такого написать.

Ну так вот. По этой же причине не хочется маргин-топ.
В теме возможности редактирования я не нашел.

Так что остатся привлекательными варианты 3 и 5

3) Третий вариант, это заменить footer на блоки div или другие элементы, но для этого потребуется править стиль.
Только не совсем понятно.
Во первых - я посмотрел исходный код - там подвал вроде и так дивами сделан. Или не на то смотрю?
Во вторых, а менять стиль - что именно? Где?

5) вставил код, который Вы написали, в файл common.css в произвольное место.
На сайте ничего не поменялось :(( Может, не туда вставил? Или надо код подредактировать под мою тему?

То же самое с элементом after и flex - вставил код - ничего не поменялось.

Не пинайте больно, если делаю какие-то глупые косяки. Просто не программист я совсем :((