显示CSS：一些div固定，一些灵活（2）

Question

不知怎的，我对此非常不好，所以我需要你的帮助。问题类似于我之前的问题（在此处找到：Display CSS: some divs fixed, some flexible）。

这次我需要＃DIV-3作为灵活的一个，随着窗口高度的变化而变得越来越小，所有其他DIVS都需要修复。所以这是一个例子：

有人可以像上次一样帮助我。 非常感谢你。

这是代码示例，但可能并不重要：

#DIV-1{
position: fixed;
padding: 1em 2em;
top: 6.8em;
right: 0;
height: 9.5em;
width: 18%;
bottom: 75%;
}

#DIV-2{
position: fixed;
padding: 1em 2em;
width: 18%;
top: 16em;
bottom: 18em;
right: 0;
}

#DIV-3{
position: fixed;
padding: 1em 2em;
bottom: 0em;
right: 0;
width: 18%;
height: 18em;
overflow-y: auto;
}

Answer 1

我认为这可能就是你想要的（使用你的另一个问题的答案）......虽然哈哈建造东西的可怕方式。

http://jsfiddle.net/uKPEn/5/

.middle1 {
    background: blue;
    height: 100px;
    top:50px;
}
.middle2 {
    background: green;
    top: 150px;
    height: 100px;
}
.logo {
    background: pink;
    overflow: scroll;
    top: 250px;
    bottom:0%;
}

不完全确定，但您可以考虑使用类似Isotope或Masonry的内容来构建像这样的东西。

Answer 2

使用CSS功能calc()

html, body {
    background-color: transparent;
    height:100%;
    width: 100%;
    margin: 0px;
    font-size:8pt;
}

#header {
    box-sizing: border-box;
    width: auto;
    height: 6.8em;
    border: 1px solid red;
}

#section {
    box-sizing: border-box;
    width: calc(100% - 18%);
    height: calc(100% - 6.8em);
    overflow-x: auto;
    border: 1px solid blue;
    float: left;
}

#DIV-1 {
    box-sizing: border-box;
    float: left;
    border: 1px solid purple;
    height: 9.5em;
    width: 18%;
}

#DIV-2 {
    box-sizing: border-box;
    float: left;
    border: 1px solid green;
    height: 9.5em;
    width: 18%;
}

#DIV-3 {
    box-sizing: border-box;
    float: left;
    border: 1px solid orange;
    height: calc(100% - 25.8em);
    width: 18%;
    overflow-y: scroll;
}

HTML

<div id="header">Header</div>
<div id="section">Section</div>
<div id="DIV-1">1</div>
<div id="DIV-2">2</div>
<div id="DIV-3">3</div>

示例：http://jsfiddle.net/7baotd4o/

calc允许我们意外，计算CSS的值。 http://caniuse.com/#feat=calc