0

I have a top and a bottom with a line in between to resize(giving more real estate to either the top or the bottom).

Basically a split-screen layout. But I am having a problem getting the bottom portion correct, no matter what I do it always extends beyond the page, and I want the box in the bottom portion to perform exactly as it does in the top portion of the page.

The following demo will show you basically what I am doing as well as my problem:

http://jsfiddle.net/mstefanko/e38bE/67/

I don't have any hard-coded heights(everything is currently set by %'s), but I added them to the fiddle for demonstration of my issue.

Right now the divider that resizes the top and bottom is resizing the top, and I have some code from jQuery UI Resizable alsoResize reverse to reverse resize the bottom. I'm not sure that I even need the extra code, but when I couldn't sort this out, I figured it was worth a shot.

Also, there's a large bottom margin on the top in order to get the jquery ui handle right, this might be causing my problems but playing with it didn't seem to get rid of the issue.

Any help is appreciated, thanks!

Community
  • 1
  • 1
mstef
  • 1,164
  • 1
  • 13
  • 36

1 Answers1

1

Your problem is that you're trying to scrunch several divs of a fixed size into one bigger fixed-size div, but the other divs don't fit. You can't expect the text to resize when you move the resizer handle to make it fit, and the divs have to go somewhere, so they overflow. Here are a few suggestions:

  • Give the container a css overflow value of auto (so when you resize it and it's too big to fit, it will automatically give you a scrollbar)
  • Set the overflow value and get rid of the resizer entirely
  • Give container a css height value of auto or scroll (if size is not an issue)
BenjaminRH
  • 11,974
  • 7
  • 49
  • 76