單頁面佈局每頁全頁面瀏覽器窗口大小

好的。首先讓我說，我可以看到這個問題如何以百種不同的方式回答，並且有點代碼意見，因此這個問題可以被解釋爲針對Stack Overflow策略。所以，讓我通過說我正在尋找標準答案來澄清這一點。單頁面佈局每頁全頁面瀏覽器窗口大小

這是我第一次嘗試單頁佈局，我想確保我能夠正確編碼，以跨所有瀏覽器類型執行。

從我迄今爲止看到的最好的方式來獲得單個頁面佈局的每個部分（又名頁面）在所有瀏覽器上都是100％的屏幕。

html{height:100% !important;width:100% !important; margin:0px; padding:0px;} 

body{height:500% !important;width:100% !important; margin:0px; padding:0px;} 

.page {height:20% !important; width:100% !important;}

含義體高度被設定爲100％*（總頁數），並用類。第定義的每個部分將是100％/（總頁數）

雖然我看到這是如何使感覺。感覺不好的做法是將高度設置爲100％以上。 所以我的問題是：這是根據最佳實踐做到這一點的正確方法？

來源

2015-12-15 user3167249

我不知道這方面的最佳實踐。

您的解決方案看起來像會工作。

但是，如果您只是針對現代瀏覽器，則可能更自然的解決方案是使用vh和vw單位。給.page一個height的100vh會給你視口的當前高度。因此，您可以使它們自然流動，並且您無需更改高度，以防您要添加其他頁面，也無需設置高度html。

來源

2015-12-15 10:16:05 DigitalDouble

那大約要高十億倍！我玩過vh，vw，vmin和vmax，試圖獲得一個響應式字體大小，但從來沒有太多運氣。視屏幕尺寸而定，它一直太大或太小。 – user3167249

好吧我實際上遇到了這個方法的問題。在手機瀏覽器中查看時，我在第一頁上並排放置了兩個引導列，並將其重新調整爲堆疊的列，使其大於移動屏幕。然而，不要在所有內容之後按下第二頁。它覆蓋第2頁背景上的列。我該如何解決這個問題？ – user3167249

任何尋找上面的答案只是使.page屬性最小高度：100vh;而不僅僅是高度支柱。 – user3167249

單頁面佈局每頁全頁面瀏覽器窗口大小

回答

相關問題