CODEWITHSUNDEEP
htmlcss
Pacuraru Daniel
Pacuraru Daniel

Reputation: 1205

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

Upvotes: 1

Views: 3188

Answers (2)

santedicola
santedicola

Reputation: 88

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/

Upvotes: 3

Andrea Ligios
Andrea Ligios

Reputation: 50203

Add 

  overflow: auto;

inside .chat-holder .

And put an height calculated with CSS Calc():

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

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

Upvotes: 0

Related Questions