Question

与this question相关。

这是一个小提琴：http://jsfiddle.net/DRbRS/

注意红色轮廓列表div如何不对齐绿色容器div的底部。

问题在于，即使已知标题的高度，也无法提前知道列表的最终高度应该是多少。

有没有办法解决这个问题而不诉诸javascript？

我们需要的是像height: fill;

这样的风格

Answer 1

使用position: absolute并设置上，左，右和下：http://jsfiddle.net/QARC9/

本文介绍了它的工作原理。

http://www.alistapart.com/articles/conflictingabsolutepositions/

Answer 2

用这个

替换你的CSS

#container {

    left: 50px;
    width: 200px;
    position: fixed;
    height: 90%;
    border: 2px dashed green;
}


#header {
    height: 30px;
    line-height: 30px;
    text-align: center;    
    border: 2px dashed blue;
    margin-left:-2px;
    margin-top:-2px;
    width:200px
}

#list {    
    border: 2px dashed red;
    overflow: auto;
    height: 91%;
    width:200px;
    margin-left:-2px;
    margin-top:-2px;


}

或在此处查看演示http://jsfiddle.net/enve/DRbRS/3/

CSS：修复变量高度元素中节的高度

2 个答案: