Embedded splitters covering entire contents won't work

[PandaWood]

Hi, I've created a JSFiddle with a skeleton of the page I'm trying to do.
It has a horizontal splitter inside the right pane of a vertical splitter.

But the horizontal splitter just doesn't work - the dividing bar won't move and when the vertical pane is resized the horizontal splitter bounces back to a height of 0 and basically goes ballistic.

https://jsfiddle.net/o0tnchuy/7/

Is there an expectation of the html structure I'm missing?

I would really like to set the bottom horizontal pane to a set/fixed height, but it looks this library only uses the position property to set the top/left?

[jcubic]

It seems that you can nest divs inside right panel.

https://jsfiddle.net/o0tnchuy/8/

I need to investigate little bit more why is this happening.

[jcubic]

It was the same issue as #54 you need to set the height of the splitter in pixels I've fixed that in version 0.23.0.

[PandaWood]

Yes, you're right. Thanks for that, sorry I didn't pick up on it. 0.23.0 is working for this now.

[jcubic]

Just found that in order to have 100% height the parent need to have defined height so this fixed the issue (even in old version):

#horizontal-body, #container, #content, body, html {
  height: 100%;
}

and you don't need $(window).resize https://jsfiddle.net/o0tnchuy/9/

[jcubic]

but you also need:

body {
  margin: 0;
}

otherwise you will have scrollbars.

[jcubic]

This is very old, but this solution in the code need to be removed. The proper fix is to have in user code:

#horizontal-body, #content {
  height: 100%;
}

the code that was used was not very good because the parents may be in different height and it also break #75