Display CSS: some divs fixed, some flexible (2) - html

Question

somehow I am very bad at this so i need your help guys. The problem is similar to my previous problem (find it here: Display CSS: some divs fixed, some flexible).
This time I need #DIV-3 to be the flexible one that gets small and big as the window height changes and all other DIVS need to be fixed. So here is an illustration:
Can someone please help my with a fiddle like last time.
Thank you very much.
this is code example, but doesnt really matter probably:
#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

I think this might be what you want (using the answer from your other question) ... horrible way to build something though haha.
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%;
}
Not exactly sure, but you could consider using something like Isotope or Masonry for building stuff that fits together like that.

Answer 2

Use the CSS function 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>
Example on: http://jsfiddle.net/7baotd4o/
calc allows us to, surprise, calculate a value for CSS.
http://caniuse.com/#feat=calc