css - 特殊的 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

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

希望这对您有所帮助。