Responsive height for one website
I am trying to figure out how to create a one page site layout made up of a series of pages, each one taking up the entire viewport:
height: 100%;
width: 100%;
For example, I really like layouts like the template in this bootstrap template:
http://startbootstrap.com/templates/freelancer/
In fact, the problem with it is the height of each page: although it is acceptable for most resolutions, I want to make sure that each page has exactly the same width and height as in the viewport.
I don't mind using javascript, in fact I suspect it is impossible to achieve without some kind of JS (maybe "listening" to resize events) by adjusting the height of the page-divs.
Obviously a css only solution would be better. Suggestions?
source to share
To make it work you can use something like providing height:100%;width:100%
body and html.
Then you create a container div and give it height: 100 * <number of pages> %
.
On every page you give them height: 100 / <number of pages> %
.
Since this is percentage based, it will work at ANY resolution .
Here is the 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 it in action here: http://jsfiddle.net/tsgqnjfr/2/ (5 pages) and here: http://jsfiddle.net/672fdmc4/2/ (2 pages)
If you can't create a container div and use it directly in the body, you can do the following:
You set body and html from height: 150%
to 2 pages andheight: 50*<number of pages>+1 %
Then you install each page with height: 100/<number of pages>%
.
Like 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) and here: http://jsfiddle.net/672fdmc4/1/ (2 pages)
Note: This method is UNRELIABLE and gives "slightly" incorrect heights.
To try to counteract this, you can try a different method and set different heights for each using body
as a container div
.
Update
By mixing the 2 methods, WORKS is actually reliable.
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 test them in action: http://jsfiddle.net/mgezx5f3/1/ (5 pages) and here: http://jsfiddle.net/x2kz3od7/ (2 pages).
Note: If you're concerned about compatibility, you can use these methods in EVERY BROCHER that supports css, even in Quirks Mode in IE!
As long as it uses css, this method will work (reliability is described in each method).
source to share
I recently wanted to do the same and discovered view units in CSS. Older browsers won't support them, and IE has some minor differences, but this might be what you're looking for:
-> http://dev.w3.org/csswg/css-values/#viewport-relative-lengths
-> http://caniuse.com/#feat=viewport-units
So, if you wanted the div to be the same size as the viewport, you could do something like this:
HTML: <div id="myDiv"></div>
CSS: #myDiv { width: 100vw; height: 100vh }
source to share