javascript - Responsive height for single page website -

-

i'm trying understand how build single-page website layout, made of series of pages, each occupying whole viewport:

height: 100%; width: 100%;

for example, layouts 1 in bootstrap template:

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

actually, problem it, height of each page: while it's acceptable resolutions, wanna sure each page same width , height viewport has.

i don't mind using javascript, in fact, suspect that's impossible achieve without kind of js (maybe "listening" resize events, too) adjusting page-divs height.

obviously, only-css solution better. suggestions?

to make work, can use giving height:100%;width:100% body , html.

then create container div , give height: 100 * <number of pages> %.

on each page, give them height: 100 / <number of pages> %.

since percent-based, work in any resolution.

here complete 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 in action here: http://jsfiddle.net/tsgqnjfr/2/ (5 pages) , here: http://jsfiddle.net/672fdmc4/2/ (2 pages)

if can't make container div, , have use straight body, can make this:

you set body , html height: 150% 2 pages , height: 50*<number of pages>+1 %

then set each page 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) , here: http://jsfiddle.net/672fdmc4/1/ (2 pages)

notice: method unreliable , gives "slightly" wrong heights.

to try counter-act this, can try use other method , set different heights each, using body container div.

update

mixing 2 methods, works reliably.

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) , here: http://jsfiddle.net/x2kz3od7/ (2 pages).

notice: if worried compatibility, can use these methods in every browser supports css, in quirks mode on ie!

as long uses css, method work (reliability described in each method).


Comments

Post a Comment