Footer не опускается вниз страницы. Появляется скролл. Как это исправить?

Question

[nvanyuk09]

В блочной верстке футер не прижимается к низу экрана. На ноутбуке появляется скролл, а на широком экране не доходит до конца вьюпорта. Может, быть я не ту высоту поставила? На всех экранах должно быть одинаково.
Ссылка на код:
https://codepen.io/nvanyukova/pen/ZEWyqKY

Comments

[Ankhena]

Давайте так.
Я вам в прошлом вопросе уже написала, что нужно отмечать решениями те ответы, которые помогли.
Вы проигнорировали и более того, сняли отметки куратора.

И теперь хотите чтобы вам снова помогали.
Это ерунда какая-то.

[Alexey]

Не понятно что Вам необходимо получить.
Скролл вертикальный появляется? Если да, то меню и контент установлена статическая высота 550, 570 пикселей.

[nvanyuk09]

Ankhena, Добрый день! Я извиняюсь. Я вроде отмечала вопросы которые помогли. Я просто еще до конца не разобралась как пользоваться всеми функциями форума. Ничего такого. Вы мне правда очень помогли. Просто может не туда нажала.

[Ankhena]

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

[nvanyuk09]

Вроде отметила. Теперь все хорошо?

[Ankhena]

nvanyuk09, ага

Answer 1

[Ankhena]

Удобнее всего это решается гридами.
Примерно так: https://jsfiddle.net/mowb6dL3/

1. Флоатами сетку не делают уже очень давно.
2. Задавайте высоту только там где без неё не обойтись

Comments

[nvanyuk09]

Нужно сделать на чистом html и css. У меня постоянные проблемы с высотой. Не понимаю от чего брать 100%. Или какую вообще высоту выбирать, чтобы было на всю высоту вьюпорта н всех устройствах.

[Ankhena]

nvanyuk09, я и написала всё на html и css.
Никакого js там нет.

% для разных величин считаются по разному.
Единицы измерения, зависящие от вьюпорта это vw, vh, vmin, vmax.

Не стоит ограничивать высоту, потому что контент может быть любым, на каких-то страницах больше, на каких-то меньше. Пользователь может поставить увеличенный размер шрифта и снова контент займет больше места, чем в макете. И подобные ситуации.

Всегда нужно думать, "а что будет, если.."

[nvanyuk09]

Спасибо большое!

Answer 2

[VladislaviKys]

У вас для content задана высота 550px, либо делайте значение высоты относительной (в %), либо адаптируйте его высоту через медиазапросы под разные разрешения экрана