两个div之间的css相对div高度auto

Question

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

我没有成功使中间div（.element-description）填补所有空隙（如高度：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？你不能把它设置为相对和使用高度：自动？这是你在尝试的吗？

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

此处的固定值必须是页眉和页脚高度，您需要将内容部分的顶部和底部设置为相同的页脚值和页眉高度加上此处的border-width值（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;
}