Max-height relative to parent doesn't work

Question

I'm trying to put a lot of content in "Thickbox" (Javascript popup window) and it works almost fine but I can't make max-height: 100%; (relative to parent) and overflow-y: scroll; work.

There are two outcomes:

1. It is as long as it should be, without vertical scroll and it goes outside the box (far too much).
2. It is as long as it should be, with vertical scroll and it goes outside the box (a little bit).

I just want to have it inside the box, with vertical scroll and I don't want it to go outside the box. Once you'll take a look at JSFiddle you'll know what I mean: http://jsfiddle.net/m4aKk/ (best viewed on large screen - 1600px+). Any advices would be great!

Why height: 100%; or max-height: 100%; aren't relative to its parent?

Suppositive

Answer 1

A solution is to make the inner box position absolute. Something like this:

#TB_ajaxContent {
    width: 440px;
    overflow-x: hidden;
    position: absolute;
    top: 30px;
    bottom: 10px;
}

This should make the inner div position the way you like it. Here's the updated fiddle - note I've removed height:auto; height:100% from the inlined style.

This is quite a common trick to get the inner div to 'be as tall as the parent'.

Inpour

That's exactly what I'm looking for :) I know about this kind of positioning but it didn't came to my mind. Thanks! Works great! – Suppositive

Parent element needs position:absolute also – Upsurge

Answer 2

replace this line in your code:

<div id="TB_window" style="width: 470px; height: 100%; margin-left: -335px; top: 48px; margin-top: 0px; visibility: visible;">  

just change height: 314px; to height: 100%; !!!

Interrogatory

It will make thickbox be 100% tall. I need it to be of fixed height and I only want inner content to be 100% tall. – Suppositive

@Paul I do this and give an answer: set a auto height size to TB_window and set fixed height size to TB_ajaxcontent . maybe this soled your problem – Interrogatory