css 两个div之间的相对div高度自动

Question

我尝试使用水平 div 来填充容器的所有空白空间。

我没有成功制作中间的 div (.element-description) 来填充所有空隙(比如 height: auto)。 (所有其他 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 设置 position: absolute ？你不能将它设置为 relative 并使用 height: auto 吗？ 这就是您要尝试的吗？

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