css max-height inside max-height [英] css max-height inside max-height
问题描述
我试图编写一个聊天页面,但我有一个问题,大小的divs:/
我有一个这样的结构:
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 class="page">
<div class="chat-holder">
<div class="chat-text">
</div>
</div>
</div>
,页面类(比如说屏幕的宽度和高度, p>
and the page class is (let's say the width and the height of the screen so it is
.page {
width: 100%;
height: 100%;
}
聊天持有者我想要宽度为740px,高度应该是任何高度,但不能超过浏览器的高度和一个背景白色和20像素padding周围的聊天区域(到目前为止我试过这个):
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):
.chat-holder {
background: #fff;
width: 740px;
max-height: 100%;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
我的聊天区域我想有一个1px的黑色边框在这个聊天持有者,如果聊天不大于浏览器减去那个40px填充,我想它有它的文本的大小,如果它是更大,我想让它有滚动内部(到目前为止我试过这个)
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. 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;
}
但这不起作用,聊天文本div聊天持有者,因为我看到是因为max-height在max-height内部不工作。我希望这个问题有一个解决方法,因为我真的不想使用jQuery或其他东西来修复它。
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. I hope there is a work-around on this issue because I really don't want to use jQuery or something to fix it.
提前感谢你
编辑: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;
}
查看小提琴: http://jsfiddle.net/KjX7s/14/
这篇关于css max-height inside max-height的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!