Нижний колонтитул внизу страницы (не липкий) даже при небольшом содержании

Question

Я новичок в SO, но я учился кодировать последние пару лет. Я просто запустил свою веб-страницу, и все выглядит хорошо, за исключением страницы About/Contact. Недостаточно содержимого для нижнего колонтитула, чтобы придерживаться нижней части, а код Sticky Footer всегда присутствует. Я хочу, чтобы это было внизу страницы и под содержимым. Он отлично смотрится на небольших браузерах, но не на больших экранах или при уменьшении масштаба.

Позиционирование абсолютное и фиксированное не работает, а нижнее: 0 тоже не работает. У меня заканчиваются идеи о том, как высунуть ее на дно.

Любые идеи ???

Вот мой сайт: http://yasminpanjwani.com/aboutcontact.html

Спасибо!

Answer 1

Вы можете рассчитать высоту окна просмотра и установите min-height на ваш основной элемент

Если вы используете JQuery

$(document).ready(function() { 

    var viewportHeight = $(document).height(); 

    $('main').css('min-height', viewportHeight - 200); // minus size of your header & footer 

}); 

Если нет;

var $main = document.getElementsByTagName('main'), 
    body = document.body, 
    html = document.documentElement; 

var height = Math.max(
       body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight 
      ); 


$main.style.minHeight = height + 'px';