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%; 
}