Positioning two horizontal divs in a dynamic way - html

Question

I have two divs inside a container:
<div id="outer">
<div id="A">
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
<div id="B"></div>
</div>
What I need is that 'B' stays at the bottom and has a fixed size (200px). 'A' should stay at the top and fill the rest of the space available. When I now resize the parent element 'B' should stay at 200px and 'A' should shrink.
I wasn't able to get this working with pure CSS but I would really prefer to have it in CSS only.
I've made a Fiddle containing a solution with jQuery but I want to avoid JavaScript for layouting whenever it's possible.
http://jsfiddle.net/t6B2e/

Answer 1

As an alternative to the other answers, you could use the calc() CSS function:
#A{
height: calc( 100% - 200px );
width: 100%;
background: #cccccc;
overflow: auto;
}
#B{
height: 200px;
width: 100%;
background: blue;
}
Example Fiddle
Browser support is rather good

Answer 2

you can use display:flex; but keep jQuery as fallback ... or CSS as fallback. Whatever here a basic example:
body {background:black;color:white;}
#outer {
display:flex;
flex-direction:column;
}
html, body , #outer {
height:100%;
margin:0;
}
#a {
overflow:auto;
}
#b {
background:blue;
min-height: 200px; /* you can use flex:1; to size it too */
}
Important: do not use Capital letter or numbers as first character naming ID or CLASS. it is not allowed and some browser will follow W3C recommendation. CSS can not be applied.
To have one growing and the other shrink and overflow, you can tune it with flex:xx;
Example where both div have a min-height and show scrollbar if needed. The blue one has priority, the other one has a min-height too, so content can still be readable
Example Here.
body {background:black;color:white;}
#outer {
display:flex;
flex-direction:column;
}
html, body , #outer {
height:100%;
margin:0;
}
#a, #b {
min-height: 100px; /* don't give a min-height to #a and it can shrink down to zero */
overflow:auto;
}
#a {
flex:2;
}
#b {
background:blue;
}

Answer 3

If I am understanding you correctly, then all you need to do is change your #A css.
Complete example:
#A{
position: absolute;
bottom:200px;
top: 0;
max-height: 100%;
width: 100%;
background: #cccccc;
overflow: auto;
}
#B{
position:absolute;
bottom: 0;
height: 200px;
width: 100%;
background: blue;
}
Basically, I removed the height and added the bottom:200px which forces the bottom of the element to always be 200px from the bottom of the parent.
Here is a working example

Answer 4

If you want the whole outer area to scroll you can do it this way with minimal CSS http://codepen.io/2ne/pen/mvoaw/
#outer {
padding-bottom: 200px;
}
#A {
}
#B {
position: fixed;
bottom: 0;
height: 200px;
width: 100%;
background: blue;
}