css max-height内的max-height

Question

我正在尝试编写一个聊天页面，但我遇到了div :/的大小问题:/我有一个类似这样的结构：

<div class="page">
  <div class="chat-holder">
    <div class="chat-text">
    </div>
  </div>
</div>

页面类是(假设屏幕的宽度和高度，所以它是

.page {
  width: 100%;
  height: 100%;
}

我希望聊天对象的宽度为740px，高度应为任意高度，但不超过浏览器高度，并在聊天区域周围使用白色背景和20px填充(到目前为止，我尝试过这样做)：

.chat-holder {
  background: #fff;
  width: 740px;
  max-height: 100%;
  padding: 20px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

现在我的聊天区域我想在这个聊天工具里面有一个1px的黑色边框，如果聊天不比浏览器减去40px的填充，我希望它有文本的大小。如果它更大，我想让它在里面滚动(到目前为止我已经尝试过了)

.chat-text {
  width: 100%;
  max-height: 100%;
  border: 1px solid #000;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: auto;
}

但这不起作用，chat-text div从chat-holder中取出，我认为这是因为max-height在max-height内不起作用。我希望在这个问题上有一个解决办法，因为我真的不想使用jQuery或其他东西来解决它。

提前谢谢你

编辑: jsFiddle http://jsfiddle.net/KjX7s/2/

Answer 1

您必须设置高度和最大高度：

.page {
  width: 100%;
  height: 100%;
}
.chat-holder {
  background: #fff;
  width: 740px;
  min-height: 20px;
  max-height: 100%;
  padding: 20px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.chat-text {
  width: 100%;
  min-height: 20px;
  max-height: 100%;
  border: 1px solid #000;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: auto;
}

请看小提琴：http://jsfiddle.net/KjX7s/14/

Answer 2

添加

  overflow: auto;

在.chat-holder内部。

并放入一个用CSS Calc()计算的高度：

max-height: calc(100% - 41px);

http://jsfiddle.net/KjX7s/5/