Нижний колонтитул Flexbox неправильно позиционируется на мобильном - PullRequest
Новая
       1

Нижний колонтитул Flexbox неправильно позиционируется на мобильном

1 голос
/ 12 октября 2019

Я использую Flexbox для отображения верхнего, среднего и нижнего колонтитула на странице. Нижний колонтитул всегда внизу. Средняя часть растягивается с помощью flex-grow:1, так что все три элемента вместе хорошо вписываются в страницу.

Это отлично работает в браузерах настольных компьютеров. В мобильных браузерах я не могу заставить макет реагировать на отображение и скрытие панели URL / панелей инструментов мобильного браузера.

Использование 100vh или 100%, поскольку высота не принимает эти полосына мобильный на счет.

Я пытался добавить javascript, чтобы ответить на изменение размера / прокрутку окна, но, похоже, это работает только половину времени.

Использование Javascript кажется довольно хакерским, есть ли CSS-способ, позволяющий учесть мобильный URL-бар?

Как разместить гибкий элемент в нижней части страницы на мобильном телефоне, даже есликогда строка URL показывает и скрывает? 

const app = document.querySelector("app")
window.addEventListener("resize", () => resize())
window.addEventListener("scroll", () => resize())

function resize(){
     console.log("resizing window")
     app.style.height = window.innerHeight + "px";
}
body {
  margin:0; padding:0;
}

app, section {
  box-sizing:border-box;
}

app {
  display:flex;
  flex-direction:column;
  height:100vh;
  border:4px solid blue;
}

.header {
  background-color:#4cc;
}

.middle {
  flex-grow:1;
  background-color:#cc4;
}

.footer {
  background-color:#4cc;
}
<app>
    <section class="header">
        Header
    </section>

    <section class="middle">
        Middle
    </section>

    <section class="footer">
        Footer
    </section>
</app>
...