具有完整视口高度的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%;
}