InnerDivTabs

HTML

<div class="parent">
    <div id="tabs">
        <ul id="tabNav">
            <li><a href="#tabA">A</a></li>
            <li><a href="#tabB">B</a></li>
        </ul>
        <div id="tabA" class="tab">
            <div class="tabInnerContainer">
                <div class="header">TAB A Heading</div>
                <div class="scrollContainer">
                    <div class="innerScroll">
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes here. Lots of text goes here.
                        Lots of text goes here. Lots of text goes...

CSS

#tabs
{
    height:98%;
}
.tabInnerContainer
{
    position:relative;
    top: 0px;
    border:thick tan solid;
    height:95%;
}
.parent
{
    margin:0px;
    padding:0px;
	height: 400px;
    width:500px;
	background-color: orange;
	border: thick purple solid;
}
.header
{
    font-weight: bold;
    font-size: 28pt;
    font-family: sans-serif,Arial;
    border:yellow thick solid;
}

.scrollContainer
{
	position: relative;
	border: thick blue solid;
    bottom:0px;
    top:0px;
    left:0px;
    right: 0px;
    height:100%;
}

.innerScroll
{
	position: absolute;
	overflow-y: auto;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

JavaScript

$("#tabs").tabs({
    heightStyle: "fill",
    active:0,
    activate: function (event, ui) {
        fixHeight(ui.newPanel.find(".tabInnerContainer"));
    },
    create: function (event, ui) {
        fixHeight(ui.panel.find(".tabInnerContainer"));
    }
});

function fixHeight(container)
{
    var header = container.find(".header");
    var scrollContainer = container.find(".scrollContainer");
    var newHeight = container.innerHeight() - header.outerHeight();
    scrollContainer.outerHeight(newHeight);
}