html - 如何在绝对定位元素中设置相对定位元素的高度？

Question

我有这样的东西jsfiddle

<div id="foo">
  <div>
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
  </div>
</div>


 #foo {
   position: absolute;
   min-height: 300px;
   width: 400px;
 }

 #foo > div {
   position:relative;
 }

 .header, .footer {
   min-height: 30px;
 }

如何让'#foo > div'占据#foo 上设置的 300px 高度？我也想将“.footer”固定到“#foo > div”的底部。 '.main' 应该填充剩余的空间，即使它是空的，并且在内容允许时变得可滚动。

我已经为此苦苦挣扎了几个小时，所以现在是时候请教专家了。任何有关 fiddle 的帮助将不胜感激。谢谢!

Answer 1

您可能正在寻找这样的东西:

http://jsfiddle.net/audetwebdesign/V2gdj/4/

使用以下 CSS；

div {
    border: 1px solid gray;    
}

#foo {
    position: absolute;
    height: 300px;
    width: 400px;
}

#foo > div {
    position: relative;
    height: inherit;
}

.header, .footer {
    height: 30px;
}
.main {
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 0;
    right: 0;
    outline: 1px solid blue;
    overflow: auto;
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

等待您的评论的解释。