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/