一页布局每页完整浏览器窗口大小

时间:2015-12-15 00:10:32

标签: html css html5

确定。首先让我说我可以看到这个问题如何能够以一百种不同的方式得到回答,并且有点编码意见,因此这个问题可以解释为反对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%*(总页数),并且使用类.page定义的每个部分将是100%/(总页数)

虽然我看到这是如何产生的。设置高度超过100%感觉不好。 所以我的问题是:根据最佳做法,这是否是正确的方法?

1 个答案:

答案 0 :(得分:1)

我不知道有关此问题的最佳做法。

您的解决方案看起来会起作用。

但是,如果您只针对现代浏览器,那么使用vhvw单位可能更自然的解决方案。给.page height 100vh将为您提供视口的当前高度。因此,您可以让它们自然流动,并且您不需要更改body高度,以防您想要添加其他页面并且您不必设置{{1}的高度也是。