[英]css max-height inside max-height
I am trying to code a chat page but I got a problem with the sizing of the divs :/ I have a structure like this: 我正在尝试编写一个聊天页面的代码,但是div的大小出现问题:/我有这样的结构:
<div class="page">
<div class="chat-holder">
<div class="chat-text">
</div>
</div>
</div>
and the page class is (let's say the width and the height of the screen so it is 页面类是(假设屏幕的宽度和高度是
.page {
width: 100%;
height: 100%;
}
The chat-holder I want to have a width of 740px and the height should be any height but not more than the browser height and a background white and a 20px padding around the chat area (so far I tried this): 我想让聊天持有人的宽度为740px,高度应为任意高度,但不超过浏览器的高度,并且聊天区域周围有白色和20px的背景填充(到目前为止,我已经尝试过):
.chat-holder {
background: #fff;
width: 740px;
max-height: 100%;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
Now my chat area I want to have a 1px black border inside this chat-holder and if the chat is not bigger than the browser minus that 40px padding, I want it to have the size of the text that is in it. 现在我的聊天区域中,我希望在此聊天保持器内有一个1px的黑色边框,如果聊天的大小不小于浏览器减去40px的空白,我希望它具有其中的文本大小。 If it is bigger, I want it to have scroll inside it (so far I tried this)
如果它更大,我希望它在其中滚动(到目前为止,我已经尝试过了)
.chat-text {
width: 100%;
max-height: 100%;
border: 1px solid #000;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
}
But this doesn't work, the chat-text div goes out of the chat-holder, as i see it is because the max-height doesn't work inside a max-height. 但这是行不通的,因为我认为是因为max-height在max-height内不起作用,所以聊天文本div脱离了chat-holder。 I hope there is a work-around on this issue because I really don't want to use jQuery or something to fix it.
我希望有一个解决此问题的方法,因为我真的不想使用jQuery或其他方法来修复它。
Thank you in advance 先感谢您
EDIT: jsFiddle http://jsfiddle.net/KjX7s/2/ 编辑:jsFiddle http://jsfiddle.net/KjX7s/2/
You have to set the height as well as the max-height: 您必须设置高度以及最大高度:
.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;
}
See the fiddle: http://jsfiddle.net/KjX7s/14/ 参见小提琴: http : //jsfiddle.net/KjX7s/14/
Add 加
overflow: auto;
inside .chat-holder
. 在
.chat-holder
内部。
And put an height calculated with CSS Calc(): 并使用CSS Calc()计算高度:
max-height: calc(100% - 41px);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.