dom/css：将多个 100% 容器包含在一个大于视口的容器中（100%）答案

【问题标题】：dom/css: inclose multiple 100% container into a container larger then the viewport(100%)dom/css：将多个 100% 容器包含在一个大于视口的容器中（100%）
【发布时间】：2012-04-17 00:33:58
【问题描述】：

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

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

我的问题是，当我将浮动容器 PAGES 设置为 width:100%; 时，浮动容器 PAGES 将跨越整个 20000 像素，因为这显然是 100%...

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

【问题讨论】：

标签： html css dom layout

【解决方案1】：

从技术上讲，您可以只对页面使用分数，例如 width:33%; 如果有 3 个页面，25% 如果有 4 个页面等。 little jQuery 是处理它的唯一正确方法：

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

jQuery width() documentation

【讨论】：

我真的很希望没有 JS 解决方案......但是我担心 jQuery 将成为这里的解决方案

【解决方案2】：

<!DOCTYPE html>

<html>
<head>
<style>
* {margin:0; padding:0;}

html, body {height: 100%; }

#frame {height: 100%; width: 100%; background: gray;}

#container {height: 100%; width: 300%; display: table;}

.page {display: table-cell; outline: 2px solid red; outline-offset: -2px;}

</style>
</head>
<body>
<div id=frame>
  <div id=container>
    <div class=page>
page1
    </div>
    <div class=page>
page2
    </div>
    <div class=page>
page3
    </div>
  </div>
</div>
</body>
</html>

不完全是您正在寻找的东西，但可能是最近浏览器的起点。请注意，表格可能会溢出其容器而不影响其宽度（灰色），从而导致 html/body 上出现滚动条。表格单元格均分宽度。但是你需要知道页面的数量。

【讨论】：

哪个浏览器不支持？在我看来display:table 就是我要找的东西
IE 7 及以下不支持 display:table