单页网站的响应高度

Question

I'm trying to understand how to build a single-page website layout, made of a series of pages, each occupying the whole viewport: 我试图了解如何构建单页网站布局，由一系列页面组成，每个页面占据整个视口：

height: 100%;
width: 100%;

For example, I really like layouts like the one in this bootstrap template: 例如，我真的很喜欢这个引导程序模板中的布局：

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

Actually, the problem with it, is the height of each page: while it's acceptable for most resolutions, I wanna be sure that each page is exactly the same width and height the viewport has. 实际上，它的问题在于每页的高度：虽然大多数分辨率都可以接受，但我想确保每个页面的视口宽度和高度完全相同。

I don't mind using javascript, in fact, I suspect that's impossible to achieve without some kind of JS (maybe "listening" to resize events, too) adjusting page-divs height. 我不介意使用javascript，事实上，我怀疑如果没有某种JS（也许是“监听”调整事件的大小），调整page-divs高度是不可能实现的。

Obviously, an only-css solution would be better. 显然，唯一的css解决方案会更好。 Suggestions? 建议？

Answer 1

To make it work, you can use something like giving height:100%;width:100% to the body and html. 为了使它工作，你可以使用像height:100%;width:100%的身体和HTML。

Then you create a container div and give it height: 100 * <number of pages> % . 然后创建一个容器div并给它height: 100 * <number of pages> % 。

On each page, you give them height: 100 / <number of pages> % . 在每个页面上，您给它们height: 100 / <number of pages> % 。

Since this is percent-based, it will work in ANY resolution. 由于这是基于百分比的，因此它可以在任何分辨率下工作。

Here is the complete html+css: 这是完整的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>

You can check it in action here: http://jsfiddle.net/tsgqnjfr/2/ (5 pages) and here: http://jsfiddle.net/672fdmc4/2/ (2 pages) 你可以在这里查看它： http ： //jsfiddle.net/tsgqnjfr/2/ （5页）和这里： http ： //jsfiddle.net/672fdmc4/2/ （2页）

If you can't make a container div, and have to use straight into the body, you can make like this: 如果你不能制作一个容器div，并且必须直接使用到身体，你可以这样做：

You set the body and html with height: 150% for 2 pages and height: 50*<number of pages>+1 % 您可以使用height: 150%设置正文和html height: 150% 2页和height: 50*<number of pages>+1 %为height: 150% height: 50*<number of pages>+1 %

Then you set each page with height: 100/<number of pages>% . 然后将每页设置为height: 100/<number of pages>% 。

Like in here: 就像在这里：

<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>

You can check here: http://jsfiddle.net/tsgqnjfr/1/ (5 pages) and here: http://jsfiddle.net/672fdmc4/1/ (2 pages) 你可以在这里查看： http ： //jsfiddle.net/tsgqnjfr/1/ （5页）和这里： http ： //jsfiddle.net/672fdmc4/1/ （2页）

Notice: This method is UNRELIABLE and gives "slightly" wrong heights. 注意：此方法不可靠，并给出“略微”错误的高度。

To try to counter-act this, you can try to use the other method and set different heights for each, using the body as the container div . 要尝试反作用，您可以尝试使用其他方法并为每个方法设置不同的高度，使用body作为容器div 。

Update 更新

Mixing the 2 methods, actually WORKS reliably. 混合2种方法，实际工作可靠。

Like this: 像这样：

<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>

To check them in action: http://jsfiddle.net/mgezx5f3/1/ (5 pages) and here: http://jsfiddle.net/x2kz3od7/ (2 pages). 要检查它们的作用： http ： //jsfiddle.net/mgezx5f3/1/ （5页）和这里： http ： //jsfiddle.net/x2kz3od7/ （2页）。

Notice: If you are worried about compatibility, you can use these methods in EVERY BROWSER that supports css, even in Quirks mode on IE! 注意：如果您担心兼容性，可以在支持css的每个浏览器中使用这些方法，即使在IE上的Quirks模式下也是如此！

As long as it uses css, this method will work (reliability is described in each method). 只要它使用css，这种方法就可以工作（每种方法都描述了可靠性）。

Answer 2

I recently wanted to do the same thing and discovered the CSS viewport units. 我最近想做同样的事情并发现了CSS视口单元。 Older browsers will not support these and IE has some slight differences but this might be what you are looking for: 较旧的浏览器不支持这些，IE有一些细微的差别，但这可能是你正在寻找的：

-> http://dev.w3.org/csswg/css-values/#viewport-relative-lengths - > http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

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

So if you wanted to make a div be the same size as the viewport then you could do something like this: 因此，如果您想使div与视口大小相同，那么您可以执行以下操作：

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

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

单页网站的响应高度

问题描述

2 个解决方案

解决方案1
7 已采纳 2014-09-18 09:45:28

解决方案2
3 2014-10-01 15:36:05

单页网站的响应高度

问题描述

2 个解决方案

解决方案1 7 已采纳 2014-09-18 09:45:28

解决方案2 3 2014-10-01 15:36:05

解决方案1
7 已采纳 2014-09-18 09:45:28

解决方案2
3 2014-10-01 15:36:05