Question

我正在尝试了解如何构建单页网站布局，由一系列页面组成，每个页面占据整个视口：

height: 100%;
width: 100%;

例如，我真的很喜欢这个引导程序模板中的布局：

http://startbootstrap.com/templates/freelancer/

实际上，它的问题在于每页的高度：虽然大多数分辨率都可以接受，但我想确保每个页面的视口宽度和高度完全相同。

我不介意使用javascript，事实上，我怀疑如果没有某种JS（也许是“监听”调整事件的大小），调整page-divs高度是不可能实现的。

显然，唯一的css解决方案会更好。建议？

Answer 1

为了使其有效，您可以使用诸如将height:100%;width:100%赋予正文和html之类的内容。

然后你创建一个容器div并给它height: 100 * <number of pages> %。

在每个页面上，您都会给他们height: 100 / <number of pages> %。

由于这是基于百分比的，因此它将以 ANY 分辨率工作。

这是完整的html + css：

<html>
    <head>
      <style type='text/css'>
        html,body{height:100% !important;width:100% !important; margin:0px; padding:0px;}

        .container {height: 500% !important; width: 100% !important;}

        .page {height:20% !important; width:100% !important;}
      </style>
    </head>
    <body>
        <div class="container">
            <div id="page1" class="page">
                page1
            </div>
            <div id="page2" class="page">
                page2
            </div>
            <div id="page3" class="page">
                page3
            </div>
            <div id="page4" class="page">
                page4
            </div>
            <div id="page5" class="page">
                page5
            </div>
        </div>
    </body>
</html>

您可以在此处查看：http://jsfiddle.net/tsgqnjfr/2/（5页）和此处：http://jsfiddle.net/672fdmc4/2/（2页）

如果你不能制作一个容器div，并且必须直接使用身体，你可以这样做：

您可以使用height: 150%为2页和height: 50*<number of pages>+1 %

设置正文和html

然后您使用height: 100/<number of pages>%设置每个页面。

就像在这里：

<html>
    <head>
        <style type='text/css'>
            html,body{height:250% !important;width:100% !important; margin:0px; padding:0px;}

            .page {height:20% !important; width:100% !important;}
        </style>
    </head>
    <body>
        <div id="page1" class="page">
            page1
        </div>
        <div id="page2" class="page">
            page2
        </div>
        <div id="page3" class="page">
            page3
        </div>
        <div id="page4" class="page">
            page4
        </div>
        <div id="page5" class="page">
            page5
        </div>
    </body>
</html>

您可以在此处查看：http://jsfiddle.net/tsgqnjfr/1/（5页）和此处：http://jsfiddle.net/672fdmc4/1/（2页）

注意：此方法 UNRELIABLE 并略微提供＆＃34;＆＃34;错误的高度。

要尝试反击此操作，您可以尝试使用其他方法，并使用body作为容器div为每个方法设置不同的高度。

<强>更新

混合使用两种方法，实际上 WORKS 可靠。

像这样：

<html>
    <head>
        <style type='text/css'>
            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;}
        </style>
    </head>
    <body>
        <div id="page1" class="page">
            page1
        </div>
        <div id="page2" class="page">
            page2
        </div>
        <div id="page3" class="page">
            page3
        </div>
        <div id="page4" class="page">
            page4
        </div>
        <div id="page5" class="page">
            page5
        </div>
    </body>
</html>

要检查它们的实际效果：http://jsfiddle.net/mgezx5f3/1/（5页）和此处：http://jsfiddle.net/x2kz3od7/（2页）。

注意：如果您担心兼容性，可以在支持css的 EVERY BROWSER 中使用这些方法，即使在IE上的Quirks mode中也是如此！

只要它使用css，此方法就可以工作（每种方法都描述了可靠性）。

Answer 2

我最近想做同样的事情并发现了CSS视口单元。较旧的浏览器不支持这些，IE有一些细微的差别，但这可能是你正在寻找的：

- ＆GT; http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

- ＆GT; http://caniuse.com/#feat=viewport-units

因此，如果您想使div与视口的大小相同，那么您可以执行以下操作：

HTML：<div id="myDiv"></div>

CSS：#myDiv { width: 100vw; height: 100vh }

单页网站的响应高度

2 个答案: