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