css relative div height auto between two div - css

Question

I try to have horizontal div to fill all the empty space of a container.
I didn't succeed to make the middle div (.element-description) to fill all empty gap (like in height: auto). (all other div have a defined height)
I tried with display:table, it near works but create some display bug in IE9.
I tried with css calc but it's not cross browser and it didn't solved all the problem.
I really don't know what to do. Maybe it's impossible in css?
css:
.element{
position: absolute;
overflow: hidden;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: 500px;
background: grey;
}
.element-back {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.title {
position: relative;
overflow: hidden;
width: 100%;
height: 40px;
border: 1px solid black;
box-sizing: border-box;
line-height: 40px;
}
.element-title-separator {
position: relative;
overflow: hidden;
height: 2px;
width: 100%;
border-bottom: 1px solid rgba(0,0,0,0.05);
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
}
.element-image {
position: relative;
overflow: hidden;
min-width: 100%;
height: 14.5%;
opacity: 0.8;
}
.element-image img{
position: absolute;
width: 100%;
height: auto;
margin-top: -30%;
}
.element-description {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
}
.element-description > div{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.element.blog .element-description > div > div{
overflow: hidden;
position: absolute;
height:100%;
}
.element-read-more {
position: relative;
overflow: hidden;
min-width: 100%;
min-height: 40px;
}
.element-informations {
position: relative;
overflow: hidden;
min-width: 100%;
min-height: 40px;
}
fiddle without table
fiddle with display table
hope that someone can help me...

Answer 1

Why do you need to set position: absolute to the .element? Can't you set it to relative and use height: auto?
Is this what you're trying?
http://jsfiddle.net/jonigiuro/UuFSg/262/
.element{
position: relative;
overflow: hidden;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: auto;
background: grey;
}

Answer 2

The fixed value here must be the header and footer height, and you need to set the top and bottom of your content section whit the same value of footer and header height plus the value of the border-width here (100px + 5px).
I hope it help
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
.box{
border: 5px solid green;
}
#container{
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
min-width: 60%;
min-height: 400px;
width: 1024px;
height: 100%;
margin-left: auto;
margin-right: auto;
border: none;
bor
}
/** Test html classic page */
#header{
display:block;
overflow: visible;
width: auto;
height: 100px;
margin: 0; padding: 0;
}
#content{
position: absolute;
/** The border over lap so 5px must be add*/
top: 105px; bottom: 105px;
right: 0; left: 0;
}
#footer{
position: absolute;
overflow: visible;
height: 100px;
right: 0; left: 0; bottom: 0;
margin: 0; padding: 0;
}