div shown with jquery is cropped

Question

I'm trying to fight a strange behaviour - and any help is appreciated.

I have a long and complex HTML page with general structure about like this:

+------------------------------------------+
| Page header                              |
+-----------------------------+------------+
|                             |  Right     |
| Main content                |  Column    |
|                             |            |
+-----------------------------+------------+

In the "main content", all the action is taking place. One of the thing that may happen is on a user's button click, a div with absolute position, which is initially invisible, is being displayed and its content is populated using AJAX (i.e. I don't know in advance how much content there is).

This works fine if the overall height of this div ends up smaller than the available height of the "main content". If however this "popup" div ends up being long due to a lot of content, then it's truncated at the bottom of "Main content" div. As there's nothing below, I can't even scroll down to see all the content of the popup. I would want the "main content" to grow to accommodate the entire height of the popup and the page to be scrollable all the way to the bottom of the popup, but this is not happening.

Here is CSS for my "main content":

.content {
    width: 770px;
    position: relative;
    overflow-x: visible;
    overflow-y: hidden;
}

And here's the CSS for the popup:

#popupedit {
    background-color: #f1f0ec;
    width: 770px;
    z-index: 100001;
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}

In HTML, popupedit is a direct child of content. There's no height or max-height restriction anywhere in the chain. So why isn't "content" growing to accommodate the "popup"?

Answer 1

You could possibly solve this by removing the absolute positioning and using a different technique (i.e. floats) to position the popup. Let me guess, position: absolute is required too? :) If so, then there's still hope: You can resize the content div with JavaScript after the content has loaded.

$(".content").css("min-height", $("#popupedit").height()+"px");

Of course this would have to run after the popup has fully loaded, and you should probably undo the resize after the popup goes away:

$(".content").css("min-height", "");