单页面布局每页全页面浏览器窗口大小

好的。首先让我说，我可以看到这个问题如何以百种不同的方式回答，并且有点代码意见，因此这个问题可以被解释为针对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

单页面布局每页全页面浏览器窗口大小

回答

相关问题