单页网站的响应高度 [英] Responsive height for single page website
问题描述
我试图了解如何构建一个由一系列页面组成的单页网站布局，每个页面占据整个视口：
身高：100％;
宽度：100％;
例如，我非常喜欢这个引导模板中的布局：
http://startbootstrap.com/templates/freelancer/
实际上，它的问题在于每个页面的高度：尽管大多数分辨率都可以接受，但我想确保每个页面的宽度和高度完全相同viewport有。
我不介意使用javascript，实际上，我怀疑如果没有某种JS（也许倾听调整事件大小， ）调整页面高度。
显然，唯一css解决方案会更好。建议？
为了使其工作，您可以使用像
height：100 * <页数> ％。 在每一页上，您给它们 height：100 /<页数> ％。
由于这是基于百分比的，因此它可以在 ANY 分辨率下运行。
以下是完整的html + css：
$ b
< ; HTML>
< head>
< style type ='text / css'>
html，body {height：100％！important; width：100％！important;保证金：0像素; padding：0px;}
.container {height：500％！important; width：100％！important;}
.page {height：20％！important; width：100％！important;}
< / style>
< / head>
< body>
< div class =container>
< div id =page1class =page>
page1
< / div>
< div id =page2class =page>
page2
< / div>
< div id =page3class =page>
page3
< / div>
< div id =page4class =page>
page4
< / div>
< div id =page5class =page>
page5
< / div>
< / div>
< / body>
< / html>
你可以在这里检查它： http://jsfiddle.net/tsgqnjfr/2/ （5页）和这里： http://jsfiddle.net/672fdmc4/2/ （2页）
如果你不能创建一个容器div，并且不得不直接使用它，你可以这样做：
设置body和html对于2页和 然后你用 像这里： 您可以在这里查看： http://jsfiddle.net/tsgqnjfr/1/ （5页）在这里： http://jsfiddle.net/672fdmc4/1/ （2页） 注意：方法是 UNRELIABLE ，并给出稍微错误的高度。 为了反制这个，你可以尝试使用另一种方法，使用 更新 混合两种方法，实际上 WORKS 像这样： $ b 检查他们的行动： http://jsfiddle.net/mgezx5f3/1/ （5页）和这里： http://jsfiddle.net/x2kz3od7/ （2页）。 注意：如果您担心兼容性问题，则可以在支持css的每个浏览器中使用这些方法，即使在 IE上的怪异模式 只要它使用css，这个方法就可以工作在每种方法中）。 I'm trying to understand how to build a single-page website layout, made of a series of pages, each occupying the whole viewport: For example, I really like layouts like the one in this bootstrap template: 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. Obviously, an only-css solution would be better. Suggestions? To make it work, you can use something like giving Then you create a container div and give it On each page, you give them Since this is percent-based, it will work in ANY resolution. Here is the complete html+css: You can check it in action here: http://jsfiddle.net/tsgqnjfr/2/ (5 pages) and here: http://jsfiddle.net/672fdmc4/2/ (2 pages) If you can't make a container div, and have to use straight into the body, you can make like this: You set the body and html with Then you set each page with Like in here: You can check here: http://jsfiddle.net/tsgqnjfr/1/ (5 pages) and here: http://jsfiddle.net/672fdmc4/1/ (2 pages) 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 Update Mixing the 2 methods, actually WORKS reliably. Like this: To check them in action: http://jsfiddle.net/mgezx5f3/1/ (5 pages) and here: http://jsfiddle.net/x2kz3od7/ (2 pages). Notice: If you are worried about compatibility, you can use these methods in EVERY BROWSER that supports css, even in Quirks mode on IE! As long as it uses css, this method will work (reliability is described in each method). 这篇关于单页网站的响应高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ height：50 *<页数> +1％ p>
height：100 /<页数>％设置每个页面。
< html>
< head>
< style type ='text / css'>
html，body {height：250％！important; width：100％！important;保证金：0像素; padding：0px;}
.page {height：20％！important; width：100％！important;}
< / style>
< / head>
< body>
< div id =page1class =page>
page1
< / div>
< div id =page2class =page>
page2
< / div>
< div id =page3class =page>
page3
< / div>
< div id =page4class =page>
page4
< / div>
< div id =page5class =page>
page5
< / div>
< / body>
< / html>
body 作为容器 div 。
$ b为每个设置不同的高度$ b
$ b
< html>
< head>
< style type ='text / css'>
html {height：100％！important; width：100％！important;保证金：0像素; padding：0px;}
body {height：500％！important; width：100％！important;保证金：0像素; padding：0px;}
.page {height：20％！important; width：100％！important;}
< / style>
< / head>
< body>
< div id =page1class =page>
page1
< / div>
< div id =page2class =page>
page2
< / div>
< div id =page3class =page>
page3
< / div>
< div id =page4class =page>
page4
< / div>
< div id =page5class =page>
page5
< / div>
< / body>
< / html>
height: 100%;
width: 100%;
height:100%;width:100% to the body and html.height: 100 * <number of pages> %.height: 100 / <number of pages> %.<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>
height: 150% for 2 pages and 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>
body as the container 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>
