单页网站的响应高度

Question

单页网站的响应高度

Fab*_* B. 2 html javascript css responsive-design twitter-bootstrap

我试图了解如何构建单页网站布局,由一系列页面组成,每个页面占据整个视口:

height: 100%;
width: 100%;

Run Code Online (Sandbox Code Playgroud)

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

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

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

我不介意使用javascript,事实上,我怀疑如果没有某种JS(也许是"监听"调整事件的大小),调整page-divs高度是不可能实现的.

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

Answer 1

Ism*_*uel 7

为了使它工作,你可以使用像给height:100%;width:100%身体和HTML的东西.

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

在每个页面上,您给他们height: 100 / <number of pages> %.

由于这是基于百分比的,因此它可以在任何分辨率下工作.

这是完整的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>

Run Code Online (Sandbox Code Playgroud)

你可以在这里查看它:http://jsfiddle.net/tsgqnjfr/2/(5页)和这里:http://jsfiddle.net/672fdmc4/2/(2页)

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

你设置body和html height: 150%为2页和height: 50*<number of pages>+1 %

然后你用每个页面设置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>

Run Code Online (Sandbox Code Playgroud)

你可以在这里查看:http://jsfiddle.net/tsgqnjfr/1/(5页)和这里:http://jsfiddle.net/672fdmc4/1/(2页)

注意:此方法不可靠,并给出"略微"错误的高度.

要尝试反作用,您可以尝试使用其他方法,并使用body容器作为容器设置不同的高度div.

更新

混合2种方法,实际上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>

Run Code Online (Sandbox Code Playgroud)

要检查它们的作用:http://jsfiddle.net/mgezx5f3/1/(5页)和这里:http://jsfiddle.net/x2kz3od7/(2页).

注意:如果您担心兼容性,可以在支持css的每个浏览器中使用这些方法,即使在IE上的Quirks模式下也是如此!

只要它使用css,这种方法就可以工作(每种方法都描述了可靠性).

归档时间：	11 年，2 月前
查看次数：	7034 次
最近记录：	11 年，1 月前