具有完整视口(viewport)高度的 CSS 流体网格布局

Question

我需要像这样为移动 Web 应用程序设计横向页面:(允许使用 CSS3 和 jQuery)

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

标题 A 和 B 贴在顶部。容器 C 和 D 填充中间部分。页脚 E 和 F 贴在视口(viewport)底部。

我需要设置以像素或百分比为单位的固定高度的页眉和页脚，它们将包含绝对定位的图像或 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%;
}