css relative div height auto между двумя div

Question

Я пытаюсь иметь горизонтальный div, чтобы заполнить все пустое пространство контейнера.

Мне не удалось сделать средний div (.element-description), чтобы заполнить весь пустой пробел (например, по высоте: авто). (все остальные div имеют определенную высоту) Я пробовал с display:table, он рядом работает, но создает ошибку отображения в IE9. Я пробовал css calc, но это не перекрестный браузер, и он не решил всю проблему.

Я действительно не знаю, что делать. Может быть, это невозможно в 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

надежда, что кто-то может мне помочь ...

Answer 1

Почему вам нужно установить позицию: абсолютная к .element? Не можете ли вы установить его на относительную и использовать высоту: авто? Это то, что вы пытаетесь?

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

Неподвижная значение здесь должно быть верхний и нижний колонтитулы высота, и вам необходимо установить верхнюю и нижнюю часть секции контента йота то же значение колонтитула и высоты заголовка плюс значение ширины границы здесь (100px + 5px). Я надеюсь, что это поможет

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; 
}