Question

我正在使用Flexbox在页面中显示页眉，中间页脚和页脚。页脚始终在底部。中间部分使用flex-grow:1进行扩展，因此所有三个元素都很好地适合页面。

这在桌面浏览器上完美运行。在移动浏览器上，我无法获得布局来响应移动浏览器的网址栏/工具栏的显示和隐藏。

使用100vh或100%是因为高度不考虑移动设备上的这些条形。

我尝试添加javascript以响应窗口调整大小/滚动，但这似乎只起作用一半。

使用Javascript似乎很麻烦，是否有CSS唯一方法来考虑移动网址栏？

即使在显示和隐藏网址栏的情况下，如何在移动设备页面的底部放置一个弹性项目？

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>

Flexbox页脚在移动设备上的位置不正确

0 个答案: