CSS：修复可变高度元素内部分的高度答案

【问题标题】：CSS: fix the height of a section within a variable height elementCSS：修复可变高度元素内部分的高度
【发布时间】：2012-05-03 03:30:18
【问题描述】：

与this question 相关。

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

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

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

有什么方法可以在不使用 javascript 的情况下解决这个问题？

我们需要像height: fill;这样的风格

【问题讨论】：

所以你有一个固定高度的容器 div，里面有一个固定高度的 div，你想让里面的其他 div 抓住剩余的高度？
容器 div 有一个 可调节 高度（height:100% 或类似的）。我相当确信我的解决方案是解决这个问题的唯一当前方法，并且很好地使用了position: absolute。

标签： css positioning

【解决方案1】：

使用position: absolute 并设置顶部、左侧、右侧和底部：http://jsfiddle.net/QARC9/

本文描述了它的工作原理。

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

【讨论】：

这是一个很好的答案。我唯一的评论是，在大多数情况下，我会使用 position:relative 作为容器（尽管它在没有包装元素的情况下无法在这个特定的小提琴中工作）。
在我的特殊情况下，我需要在 position:fixed 页面元素中使用我的列表。该方法适用于 or。

【解决方案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/

【讨论】：

这行不通。调整包含区域的垂直大小。这仅适用于浏览器视口的一个特定高度。