两个元素在一个固定高度的容器中共享可用高度

Question

我很难正确地理解这个问题，但我希望在固定高度的容器中有两个div共享相同的高度。所以#container元素的固定高度为例如500像素; #upper和#lower元素在其生命周期中可以变得更高更小，但永远不会超过500px。如果两个内部元素开始重叠，则它们应达到最大高度，并允许用户使用滚动条。

我添加了一张图片来清理：

一些示例性（非工作）CSS概念性地显示了我想要做的事情：

#container {
    position: absolute;
    height: 500px;
}

#upper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 10%;
    max-height: 90%;
    overflow: auto;
}

#lower {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 10%;
    max-height: 90%;
    overflow: auto;
}

Answer 1

你可以试试下面的声音，但是如果我有想象力的东西可以使用，那会更容易。

http://codepen.io/DanielMinett/pen/uEdFv

#container {
  width: 300px;
  height:500px;
  background-color: #CCCCCC;
  padding: 15px;
  position:relative
}

#upper {
  background-color: #1E90FF;
  min-height: 10%;
  max-height: 90%;
  padding-top: 3px;
  padding-left: 5px;
}

#lower {
  background-color: #EE8833;
  min-height: 10%;
  max-height: 90%;
  padding-top: 3px;
  padding-left: 5px;
  position:absolute;
  bottom:0;

Answer 2

使用CSS：

可以将元素的高度限制为其父级的高度（或百分比）。

根据另一个元素的高度动态限制它是不可能的，并且需要一个实际的编程语言（即javascript）。

作为旁注，我可以设想你需要这个功能的唯一情况（而不仅仅是设置说，max-height：50％;在两个元素上）是你无论如何使用javascript填充元素的地方。 ..？