Question

I am looking into a basic DOM layout that lets me put a couple containers that are set width:100%; height:100%; in a row so I can let the user scroll between them:

So I have a FRAME that is set to width:100%; height:100%; overflow:scroll; and an inclosed CONTAINER that is eg width:20000px; height:100%;.
Now I can scroll through the vast landscape of the blue CONTAINER where I would typically have elements absolute positioned in it and could scroll to. So far so good.
Now I have several PAGES that need width:100%; height:100%; because of overlapping content in it.

My problem is now that the floated container PAGES will span over the entire 20000px when I set it to width:100%; as that is 100% obviously…

How would you display multiple container in a row that are all as wide and as high as the viewport of the browser possibly without any JS hacks…

Answer 1

Technically, you could just use fractions for the pages, like width:33%; if there are 3 pages, 25% if there are 4 pages, etc. In order for that to look clean across multiple browsers and window sizes, a little jQuery is the only proper way to handle it:

$(function(){
    $('#first_page,#second_page,#third_page').css('width',$(window).width());
});

jQuery width() documentation