css - 具有完整视口高度的 CSS 流体网格布局

Question

我需要为这样的移动 Web 应用程序设计一个横向页面：（允许使用 CSS3 和 jQuery）

A、C 和 E 在百分比上共享相同的宽度（可能是 50%，可能或多或少）。B、D 和 F 填充剩余宽度。

标题 A 和 B 固定在顶部。容器 C 和 D 填充中间部分。页脚 E 和 F 粘在视口底部。

我需要设置以像素或百分比为单位的固定高度的页眉和页脚，它们将包含绝对定位的图像或 DIV 标签。

C 容器将接收具有绝对定位百分比的各种标签（从该容器的左侧或右侧、顶部或底部）。

我需要 D 容器来接收带有 overflo-Yw 的长文本，并且内容必须可以用手指手势（Android / iPhone）滚动而不滚动页面的其余部分。

是否有一些 CSS 大师有类似设计的示例来展示？

Answer 1

的HTML

<div class="left">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>
<div class="right">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

CSS

.left,.right{
 float:left;
 width:48,5%
}
.left{
 margin:0 3% 0 0;
}
.header{
height:20px;
width: 100%;
}
.content{
height:500px;
width: 100%;
}
.footer{
height:20px;
width: 100%;
}