Responsive height for single page website

javascript html css twitter-bootstrap responsive-design

10,424

Solution 1

To make it work, you can use something like giving height:100%;width:100% to the body and html.

Then you create a container div and give it height: 100 * <number of pages> %.

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

Since this is percent-based, it will work in 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 make a container div, and have to use straight into the body, you can make like this:

You set the body and html with height: 150% for 2 pages and height: 50*<number of pages>+1 %

Then you set each page with 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) 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 body as the container div.

Update

Mixing the 2 methods, actually 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) 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).

Solution 2

I recently wanted to do the same thing and discovered the CSS viewport units. Older browsers will not support these and IE has some slight differences but this might be what you are looking for:

-> http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

-> http://caniuse.com/#feat=viewport-units

So if you wanted to make a div be the same size as the viewport then you could do something like this:

HTML: <div id="myDiv"></div>

CSS: #myDiv { width: 100vw; height: 100vh }

10,424

Author by

Fabio B.

http://www.linkedin.com/in/fabiobozzo

Updated on June 13, 2022

Comments

Fabio B. almost 2 years
I'm trying to understand how to build a single-page website layout, made of a series of pages, each occupying the whole viewport:
```
height: 100%;
width: 100%;
```
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?