最大高度内的CSS最大高度答案

【问题标题】：css max-height inside max-height最大高度内的CSS最大高度
【发布时间】：2012-11-02 15:25:22
【问题描述】：

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

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

页面类是（假设屏幕的宽度和高度是这样的

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

我希望聊天持有者的宽度为 740 像素，高度应为任意高度，但不得超过浏览器高度、背景白色和聊天区域周围 20 像素的填充（到目前为止，我尝试过这个）：

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

现在我的聊天区域我想在这个聊天支架内有一个 1 像素的黑色边框，如果聊天不大于浏览器减去 40 像素的填充，我希望它具有其中文本的大小。如果它更大，我希望它在里面滚动（到目前为止我试过这个）

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

但这不起作用，聊天文本 div 离开了聊天持有者，正如我所见，这是因为最大高度在最大高度内不起作用。我希望有一个解决这个问题的方法，因为我真的不想使用 jQuery 或其他东西来解决它。

提前谢谢你

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

【问题讨论】：

你能做一个jsFiddle吗？
如何在您的聊天工具上使用overflow:auto，例如jsfiddle.net/KjX7s/6。编辑：哎呀，忘了把它放进去。
不要把overflow:auto放在chat-text上，你能把overflow:auto放在chat-holder上吗？
如果我在 .chat-holder 上使用它，它会起作用，但布局是这样的，我不能争论它:) 现在我正在考虑使用轮廓来围绕这条线聊天文本，但我还有另一个问题，聊天文本有一个边界半径，看起来它看起来在边缘：/ jsfiddle.net/KjX7s/8

标签： html css

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

【讨论】：

如果我这样做，当我的内容较少时，它不会像它应该的那样调整大小jsfiddle.net/KjX7s/9 它总是显示它到最大高度
我认为这正是您想要的 =) 然后尝试设置一个最小高度。我编辑了答案和小提琴。
我看到你在看你的小提琴，但聊天持有者并没有在聊天文本周围保留 20 像素的填充，它只有最大高度：D 我使用那个聊天持有者只是为了喜欢聊天文本周围的边框:)
最后一次尝试 :) 希望对您有所帮助。重要的是你明白了。
现在我们回到第一格：D 当我添加更多内容时，它不会停在页面底部，而是离开页面:(

【解决方案2】：

添加

  overflow: auto;

在.chat-holder 内。

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

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

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

【讨论】：