css - 自动高度并在中间 div 中滚动 - 可能吗？

Question

我要:

<div style="height:100%">
  <div style="height:70px;">header</div>
  <div style="overflow-y:scroll;">main</div>
  <div style="height:60px;">footer, alw. at bottom parent-div</div>
</div>

真实的(px)容器高度可能会根据客户端窗口大小而改变，在 css 主题中设置页脚和页眉的高度。

所有定位都应该是相对的。需要JS来解决吗？

(试过main上的height:auto，好像没有效果。)

Answer 1

你可以使用绝对定位来实现这个很容易，为什么要定位relative呢？

#header, #main, #footer {
    left: 0;
    right: 0;
    position: absolute;
}     

#header {
    top: 0;
    height: 70px;
    background-color: yellow;
}

#main {
    top: 70px;
    bottom: 60px;
    background-color: lime;
    overflow: auto;  
}

#footer {
    bottom: 0;
    height: 60px;
    background-color: red;
}

JSFiddle:http://jsfiddle.net/Tg8g5/