css max-height inside max-height

Question

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>

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):

.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. 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. I hope there is a work-around on this issue because I really don't want to use jQuery or something to fix it.

Thank you in advance

EDIT: jsFiddle http://jsfiddle.net/KjX7s/2/

How about using `overflow:auto` on your chat holder a la http://jsfiddle.net/KjX7s/6/. EDIT: Oops, forgot to put it in. — Asad Saeeduddin, Nov 02 '12 at 15:56
Instead of putting the `overflow:auto` on the `chat-text`, could you put the `overflow:auto` on the `chat-holder`? — Joshua Dwire, Nov 02 '12 at 15:58
it works if i use it on the .chat-holder but the layout is like that and i cant argue about it :) now in the meantime i was thinking to use an outline to make that line around the chat-text but i have another problem, the chat-text has a border-radius and look ho it looks on the edges :/ http://jsfiddle.net/KjX7s/8/ — Pacuraru Daniel, Nov 02 '12 at 16:04

santedicola · Answer 1 · 2012-11-02T16:31:06.853

3

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/

edited Nov 02 '12 at 16:31

answered Nov 02 '12 at 15:59

santedicola

88
6

if i do this, when i have less content, it iwll not resize as it should http://jsfiddle.net/KjX7s/9/ it always shows it to max height – Pacuraru Daniel Nov 02 '12 at 16:11
I thought that was exactly what you wanted =) Try to set a min-height then. I edited the answer and the fiddle. – santedicola Nov 02 '12 at 16:19
i saw looking at your fiddle but the chat-holder does not keep that 20px paddin g around the chat-text, it just had max height :D i am using that chat-holder just to have like a border around the chat-text :) – Pacuraru Daniel Nov 02 '12 at 16:24
Last try :) I hope it helps. The important is that you get the idea. – santedicola Nov 02 '12 at 16:33
now we go back to square one :D when i add more content, it doesnt stop on the bottom of the page but goes off page :( – Pacuraru Daniel Nov 02 '12 at 16:37

score 0 · Answer 2 · answered Nov 02 '12 at 15:58

0

Add

  overflow: auto;

inside .chat-holder .

And put an height calculated with CSS Calc():

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

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

answered Nov 02 '12 at 15:58

Andrea Ligios

49,480
26
114
243

css max-height inside max-height

2 Answers2

Linked