html - dom/css : inclose multiple 100% container into a container larger then the viewport(100%)

Question

我正在研究一个基本的 DOM 布局，它可以让我放置几个设置为 width:100%; 的容器。 height:100%; 在一行中，这样我就可以让用户在它们之间滚动:

所以我有一个 FRAME 设置为 width:100%;高度:100%； overflow:scroll; 和一个封闭的容器，例如 width:20000px;高度:100%；。现在我可以滚动浏览蓝色 CONTAINER 的广阔景观，我通常会将元素绝对定位在其中并可以滚动到那里。到目前为止，一切都很好。现在我有几个页面需要 width:100%; height:100%; 因为里面有重叠的内容。

我现在的问题是，当我将其设置为 width:100%; 时， float 容器 PAGES 将跨越整个 20000px，因为这显然是 100%...

如何在没有任何 JS hack 的情况下连续显示多个与浏览器视口(viewport)一样宽和一样高的容器...

Answer 1

从技术上讲，您可以只对页面使用分数，例如 width:33%; 如果有 3 页，25% 如果有 4 页，等等。为了让它在多种浏览器和窗口大小下看起来干净，一点点 jQuery 是处理它的唯一正确方法:

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

jQuery width() documentation