Высота веб-страницы больше, чем я объявил в CSS

Question

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

Css:

body{height: 100vh;}
form{line-height: 40px;position:absolute;}

Js:

var search = window.screen.height - 40;
        document.form.style.top = search + "px";

Мое устройствоимеет высоту 640 пикселей, но моя веб-страница будет иметь высоту 680 пикселей

Answer 1

Нет необходимости в js или абсолютном позиционировании ... вам просто нужно настроить его так, как вам нужно смотреть на него ... когда я сказал, используйте display: flex, который необходимо ввести в поле контейнера иваш веб-контент должен находиться в отдельном разделе вне вашей формы, например:

  body {height: 100%}

  .container {
    display: flex; 
    flex-direction: column; 
    height: 100vh;
  }

  .content {flex: 1;}

   form {
    width: 100%;
    height: 40px;
    background: #000;
  }

Я скопировал ваш код и добавил его сюда: https://codepen.io/izzy_zeke/pen/OqVOVL