CSS最大高度

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的黑色边框，如果聊天是不是比浏览器减去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/

Answer 1

添加

overflow: auto; 

内.chat-holder。

并把与CSS计算器（）计算的高度：

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

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

Answer 2

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

.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/