Несколько возможных причин, по которым footer может не отображаться в длине:

• Смешивание разных единиц измерения. 1 Для корректного отображения рекомендуется привести их к одному-двум типам (например, % и px). 1
• Неправильное позиционирование. 3 Чтобы footer всегда располагался внизу страницы, можно использовать CSS Flexbox. 3 Для этого нужно оформить разметку body свойствами display: flex и flex-direction: column, а к элементу main добавить flex: 1, чтобы он занял всё свободное пространство. 3 Затем футеру присвоить margin-top: auto, благодаря этому он будет автоматически перемещаться в нижнюю часть страницы. 3
• Перекрытие контентом. 3 Чтобы футер не перекрывал основное содержимое, элементу
  нужно присвоить свойство padding-bottom. 3

Для точной диагностики и решения проблемы рекомендуется обратиться к специалисту.