单页网站的响应高度答案

【问题标题】：Responsive height for single page website单页网站的响应高度
【发布时间】：2014-11-04 14:19:53
【问题描述】：

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

height: 100%;
width: 100%;

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

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

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

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

显然，仅使用 CSS 的解决方案会更好。有什么建议吗？

【问题讨论】：

您是说要调整每个页面内容的大小，以便无论视口大小如何，您总能看到一个完整页面？
您在寻找vh吗？ caniuse.com/#search=vh
不仅仅是一页（作为示例“封面”引导模板）...所有页面都应具有与窗口相同的大小。我看到很多响应式单页网站的行为是这样的：你永远看不到页面之间的“断线”
@Bart ... 似乎有问题 :(
jsbin.com/varemo/1

标签： javascript html css twitter-bootstrap responsive-design

【解决方案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，而不得不直接使用到body中，你可以这样制作：

你用height: 150%为2页和height: 50*<number of pages>+1 %设置body和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。

更新

混合这两种方法，实际上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，这个方法就可以工作（每个方法都有可靠性说明）。

【讨论】：

【解决方案2】：

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

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

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

因此，如果您想让 div 与视口大小相同，则可以执行以下操作：

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

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

【讨论】：

使用height: 100vh 是今天的正确答案。在过去，那个 CSS 单元是非常新的。现在，大多数浏览器都支持该单元，当兼容性不是问题时，这就是答案。对于oldie IE，你被我的方法卡住了。