Fluid Div under fixed height elements in css? - css

Question

I was wondering if there was a way to have an element stretch itself with the remaining window space it has when a fixed width has taken up a certain amount of the window.
For example
<div id ="first">
This div will ALWAYS be fixed at 20px height
</div>
<div id="second">
This div will take up 100% of the remaining space between the top div (first div that is 20px high ) and the bottom of the window.
</div>
Thank You

Answer 1

Here's an example using fixed positioning:
html, body {
margin:0;
padding:0;
height:100%;
}
#first {
height:20px;
background:yellow;
position:fixed;
top:0;
left:0;
right:0;
z-index:1;
}
#second {
padding-top:20px;
height:100%;
background:pink;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
overflow:auto;
}
And one using relative positioning:
html, body {
margin:0;
padding:0;
height:100%;
}
#first {
height:20px;
background:yellow;
position:relative;
z-index:1;
}
#second {
margin-top:-20px;
padding-top:20px;
height:100%;
background:pink;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
overflow:auto;
}
Both are assuming the following HTML:
<div id ="first">
This div will ALWAYS be fixed at 20px height
</div>
<div id="second">
This div will take up 100% of the remaining space between the top div (first div that is 20px high ) and the bottom of the window.
</div>

Answer 2

If you borrow the sticky footer idea from here, and you adapt it to get a fixed header, it would look like this (fiddle).
the html:
<div id ="first">
This div will ALWAYS be fixed at 20px height
</div>
<div id="second">
<div id="push"></div>
This div will take up 100% of the remaining space between the top div (first div that is 20px high ) and the bottom of the window.
</div>​
the css:
#first {
height: 20px;
}
#push {
height: 20px;
background: #fcc;
}
html, body {
height: 100%;
}
#second {
min-height: 100%;
height: auto !important;
height: 100%;
margin: -20px 0;
background: #cfc;
}

Answer 3

Is this what you want?
http://jsfiddle.net/xvnCd/
In your first sentence you say "fixed width" but in the code you say height, so I'm not sure if this is what you're looking for.
Note that this version will lose you 20px at the bottom of the viewport, so it may or may not work for you depending on how you need this to be used.