css - 特殊的 CSS 布局问题

Question

我正在尝试弄清楚如何为我以前从未见过的特殊布局编写一些 CSS。下图包含这些部分。指导:

• “1”部分是标题，应固定在 alpha 区域内
• “2”部分是一个 div，当它太高时应该有一个滚动条(由视口(viewport)/窗口的高度决定)
• “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%;
}

希望对你有帮助。