奇特的CSS佈局問題

Question

我想弄清楚如何編寫一些我以前沒見過的奇特佈局的CSS。下面的圖片包含部分。用於指導：

• 第「1」是一個標題，即應該是固定的alpha區內
• 第「2」是一個div，其應該有一個滾動條時，它得到太高（由所確定的視窗/窗口的高度）
• 部分「3」是頁腳，應該在alpha區域內固定
• 部分「4」是一個右手，流體容器，將有一個iframe。 iframe本身將管理滾動。

有什麼想法？

我此刻的代碼是那種所有的地方，但是這是我多麼接近了要點：

CSS: 
.controller { 
    width: 400px; 
    height: 100%; 
} 
.controller header { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 60px; 
    width: 400px; 
} 
.controller footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    height: 60px; 
    width: 400px; 
} 
.controller .body { 
    overflow: scroll; 
} 
.focus { 
    float: left; 
    width: 100%; 
} 

Markup: 

<div class="wrapper"> 
    <div class="container"> 
     <header></header> 
     <div class="body"> 
     <footer></footer> 
    </div> 
    <div class="focus"> 
    </div> 
</div> 

Answer 1

這裏是如何實現這一demo in jsFiddle，

我使用的風格是

body, html { 
    padding:0; 
    margin:0; 
} 
.container { 
    width: 25%; 
    height: 100%; 
    float:left; 
    position:absolute; 
} 
.container header { 
    display:block; 
    height: 10%; 
    width:100%; 
    background-color:#ff5; 
} 
.container .body { 
    position: relative; 
    overflow: auto; 
    width: 100%; 
    height:80%; 
    background-color:#f5f; 
} 
.container footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    height: 10%; 
    width: 25%; 
    background-color:#5ff; 
} 
.focus { 
    background-color:#ddd; 
    position: fixed; 
    left: 25%; 
    width:75%; 
    height: 100%; 
    overflow:auto; 
} 
.focus iframe{ 
    width:99%; 
    height: 99%; 
} 

希望這對你有所幫助。