如何在頁面中設置頁腳以同時在 PWA 和瀏覽器上工作？

Question

我正在構建一個 PWA 並使其具有響應性是一個真正的挑戰。

我正在嘗試為我的頁面創建頁腳，所以我創建了這些類

#root {
 height:100vh;
}

.provider-container {
    padding: 3rem 1rem 4rem 1rem;
    height: 90%;
    border-radius: 0 0 1rem 1rem;
}

.footer{
    position: absolute;
    bottom: 0;
    right:0;
    left:0;
    height: 4rem;
    background: white;
}

這就是我的 html 的樣子

<body>
 <div id="root">
  <div>Some content....</div>
  <div className="footer">footer</div>
 </div>
</body>

這在我調試時有效。 這個想法是，對頁腳的高度和容器的底部填充使用相同的值，我可以適應所有內容。 當您將頁面添加到主屏幕並打開應用程序時，它就可以工作了。 但是，當我使用瀏覽器打開頁面時，容器超出了它的限制。 部分內容放在頁腳后面，就好像瀏覽器的頁腳是視口的一部分。 我認為下面的圖片將有助於理解。 我可以更改頁面的內容，使所有內容變小，刪除一些邊距，但問題是當我在沒有瀏覽器的情況下（從主屏幕打開）打開應用程序時，所有內容看起來都會變小。

有任何想法嗎？

Answer 1

部分內容放在頁腳后面，就好像瀏覽器的頁腳是視口的一部分。

這是 nodeElement 為absolute時的預期行為。 它不再與 DOM 布局的 rest 一起流動。 因此，如果屏幕空間有限，項目的 rest 將重新流動和滾動，但絕對項目將保持原位。

由於 window / 視口的大小，PWA 的行為可能會有所不同。

屏幕截圖似乎是在筆記本電腦/台式機上制作的。 驗證兩種情況的視口寬度是否相同。

如果您希望頁腳在底部，但如果內容需要滾動，則使用頁面的 rest 滾動，您可以使用 JS 進行。

如何在頁面中設置頁腳以同時在 PWA 和瀏覽器上工作？

問題描述

1 個解決方案

解決方案1
0 2021-01-04 17:03:49

如何在頁面中設置頁腳以同時在 PWA 和瀏覽器上工作？

問題描述

1 個解決方案

解決方案1 0 2021-01-04 17:03:49

解決方案1
0 2021-01-04 17:03:49