特殊的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%;
}

希望这对你有所帮助。