newbie help: tab content height 100%

[linuskamb]

I am trying to put my current content into a tabs panel.  I have a single div with a map in it.  It is styled with height:100%.  When I wrap the map div in easyui-tabs, I cannot get the map div to automatically fill the tab panel.  I can set a hard height in pixels, but I want it to automatically fill the available space.

The div that is the tabs container is set to height:100% and that is appropriately filling all the space that the map had filled when not wrapped in the tabs container.

How do I get the tab content to be 100% of container height?

thanks,
Linus

[Pierre]

Hello Linus
please check "fit" property in the Tabs documentation (http://www.jeasyui.com/documentation/index.php)

[linuskamb]

Hi Pierre,

Thanks for your response.

I tried the fit property on both the easyui-tabs div, in which case it over-rode the width I had specified for that element, as well as on the content div, where it did not seem to do anything at all.  Without the fit property, the easyui-tabs div is properly sized to 100% height of the containing element, but the tab content (the map in this case) comes up with a 0px height, as determined by chrome dev tools inspection.

I am no expert in css and front-end development, so I am probably messing something up.

In trying things, I have discovered that if I put the css styling (height, width, border, etc) I want into the div html directly instead of being referenced by class in the css file, things work better.  The whole page layout is getting messed up, and I'm getting scroll bars that I don't want or need (and in fact, don't do anything) around the map, but at least the map is coming up full height.