特殊的CSS布局问题

我正试图找出如何为一个我以前从未见过的特殊布局编写一些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>

CSS:
.控制员{
宽度：400px；
身高：100%；
}
.控制器标题{
位置：绝对位置；
排名：0；
左：0；
高度：60px；
宽度：400px；
}
.控制器页脚{
位置：绝对位置；
底部：0；
左：0；
高度：60px；
宽度：400px；
}
.控制员.身体{
溢出：滚动；
}
.焦点{
浮动：左；
宽度：100%；
}
标记：

以下是如何实现这一点的一个方法

我用的样式是

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

---

希望这对你有所帮助。

为什么你认为这很奇怪？当然，这很容易。但是，首先尝试在谷歌上读一些东西，然后当你在尝试时遇到问题时，在这里提问。使用固定定位，谷歌会帮你：）啊，这太好了，谢谢你。你知道页眉和页脚是否可以使用精确的高度（例如60像素的高度），并且仍然可以达到预期的效果吗？我不确定，我也会试试。顺便说一句，你可以为此编写脚本，或者使用或用于复杂的ccs操作我目前正在使用SASS，但由于高度取决于访问者的视口，我不确定是否可以使用css（除了使用

calc

css方法）我意识到我可以使用css

calc

函数来做我想做的事情。谢谢你的帮助！对不起，我的工作有点忙。如果您不介意，请用解决方案更新您的问题。