1

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

我附上了一张图片来澄清事情：

还有一些示例（非工作）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;
}
4

2 回答 2

0

您可以尝试以下方法，但如果我有一些超出我想象的东西可以使用，这会更容易。

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;
于 2012-12-05T02:31:10.593 回答
0

使用 CSS：

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

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

作为旁注，我可以设想您需要此功能的唯一情况（而不仅仅是设置说，max-height:50%; 在两个元素上）是无论如何您都将使用 javascript 填充元素......？

于 2012-12-05T03:20:14.147 回答