单页网站的响应高度

Responsive height for single page website

本文关键字：高度 响应 网站 单页      更新时间：2023-09-26

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

height: 100%;
width: 100%;

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

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

事实上，它的问题是每页的高度：虽然这对大多数分辨率来说都是可以接受的，但我想确保每页的宽度和高度与视口完全相同。

我不介意使用javascript，事实上，我怀疑如果没有某种JS（可能也"监听"调整事件大小）来调整页面div的高度，这是不可能实现的。

显然，只有css解决方案会更好。建议？

要使其工作，可以使用类似于将height:100%;width:100%赋予body和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%和height: 50*<number of pages>+1 % 为2页设置正文和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页）

注意：此方法不可靠并且给出了"略微"错误的高度。

要尝试反作用，可以尝试使用另一种方法，并为每个方法设置不同的高度，使用body作为容器div。

更新

混合这两种方法，实际上工作可靠。

像这样：

<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的EVERYBROWSER中使用这些方法，即使在IE上的Quirks模式中也是如此！

只要它使用css，这个方法就会起作用（每个方法都描述了可靠性）。

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

->http://dev.w3.org/csswg/css-values/#viewport-相对长度

->http://caniuse.com/#feat=viewport-单位

因此，如果你想让div与视口大小相同，那么你可以这样做：

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

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

相关文章：