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