xtrmstep/Div auto heigh resizing.html

## Div auto heigh resizing.html
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <script src="http://code.jquery.com/jquery-git.min.js"></script>
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }

        .header {
            background-color: greenyellow;
            height: 50px;
            left: 0px;
            position: fixed;
            top: 0px;
            width: 100%;
        }

        .footer {
            background-color: gray;
            bottom: 0px;
            height: 50px;
            left: 0px;
            position: fixed;
            width: 100%;
        }

        .container {
            left: 0px;
            margin: 10px auto;
            position: relative;
            top: 50px;
            width: 99%;
        }

        .scroll-container {
            border: 1px solid black;
            overflow: auto;
            width: 100%;
        }

        .visible {
            display: block;
        }
        .invisible {
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            initDivResizing({
                $detailsPanel: $(".container"),
                $scrollContainer: $(".scroll-container"),
                $window: $(window),
                $footer: $(".footer")
            });
        });

        function initDivResizing(vars) {
            resizeDiv(vars.$detailsPanel, vars.$window, vars.$footer, vars.overrideOffsetBottom);
            resizeDiv(vars.$scrollContainer, vars.$window, vars.$footer, vars.overrideOffsetBottom);
            $(window).resize(function() {
                var _vars = vars;
                resizeDiv(_vars.$detailsPanel, _vars.$window, _vars.$footer, _vars.overrideOffsetBottom);
                resizeDiv(_vars.$scrollContainer, _vars.$window, _vars.$footer, _vars.overrideOffsetBottom);
            });
            $(".container a").click(function() {
                if ($(this).hasClass("page1c")) togglePage(1, 2);
                if ($(this).hasClass("page2c")) togglePage(2, 1);

                var _vars = vars;
                resizeDiv(_vars.$detailsPanel, _vars.$window, _vars.$footer, _vars.overrideOffsetBottom);
                resizeDiv(_vars.$scrollContainer, _vars.$window, _vars.$footer, _vars.overrideOffsetBottom);

                return false;
            });
        }

        function resizeDiv($div, $window, $footer, overrideOffsetBottom) {
            if ($div.length > 0) {
                var offset;
                // visible element should have top,left > 0
                for (var i = 0; i < $div.length; i++) {
                    offset = $($div[i]).offset();
                    if (offset.top > 0 && offset.left > 0) break;
                    // this data will be used if nothing found
                    offset = { top: 0, left: 0 };
                }
                var offsetBorder = 20; // extra offset to account borders and other spaces
                var vieportWidth = $window.width();
                var vieportHeight = $window.height();
                // calc space from the top-left
                var offsetTop = offset.top + offsetBorder;
                var offsetLeft = offset.left + offsetBorder;

                // calc space from the bottom
                var offsetBottom = $footer.height();
                if (overrideOffsetBottom)
                    offsetBottom = overrideOffsetBottom;

                // resize all divs
                $div.width(vieportWidth - offsetLeft);
                $div.height(vieportHeight - offsetTop - offsetBottom);
            }
        }

        function togglePage(show, hide) {
            $(".page" + hide).removeClass("visible").addClass("invisible");

            $(".page" + show).removeClass("invisible").addClass("visible");
        }
    </script>
</head>

<body>
<div class="header"></div>
<div class="container">
    <div><a class="page1c">page 1</a>|<a class="page2c">page 2</a></div>
    <div class="page1 invisible">
        <div>1</div>
        <div>Some text before the scroll container</div>
        <div class="scroll-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
        </div>
    </div>
    <div class="page2 visible">
        <div>2</div>
        <div class="scroll-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
        </div>
    </div>

</div>
<div class="footer"></div>
</body>
</html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="robots" content="noindex, nofollow">
	<meta name="googlebot" content="noindex, nofollow">
	<script src="http://code.jquery.com/jquery-git.min.js"></script>
	<style type="text/css">
	body {
	margin: 0px;
	padding: 0px;
	}

	.header {
	background-color: greenyellow;
	height: 50px;
	left: 0px;
	position: fixed;
	top: 0px;
	width: 100%;
	}

	.footer {
	background-color: gray;
	bottom: 0px;
	height: 50px;
	left: 0px;
	position: fixed;
	width: 100%;
	}

	.container {
	left: 0px;
	margin: 10px auto;
	position: relative;
	top: 50px;
	width: 99%;
	}

	.scroll-container {
	border: 1px solid black;
	overflow: auto;
	width: 100%;
	}

	.visible {
	display: block;
	}
	.invisible {
	display: none;
	}
	</style>
	<script type="text/javascript">
	$(function() {
	initDivResizing({
	$detailsPanel: $(".container"),
	$scrollContainer: $(".scroll-container"),
	$window: $(window),
	$footer: $(".footer")
	});
	});

	function initDivResizing(vars) {
	resizeDiv(vars.$detailsPanel, vars.$window, vars.$footer, vars.overrideOffsetBottom);
	resizeDiv(vars.$scrollContainer, vars.$window, vars.$footer, vars.overrideOffsetBottom);
	$(window).resize(function() {
	var _vars = vars;
	resizeDiv(_vars.$detailsPanel, _vars.$window, _vars.$footer, _vars.overrideOffsetBottom);
	resizeDiv(_vars.$scrollContainer, _vars.$window, _vars.$footer, _vars.overrideOffsetBottom);
	});
	$(".container a").click(function() {
	if ($(this).hasClass("page1c")) togglePage(1, 2);
	if ($(this).hasClass("page2c")) togglePage(2, 1);

	var _vars = vars;
	resizeDiv(_vars.$detailsPanel, _vars.$window, _vars.$footer, _vars.overrideOffsetBottom);
	resizeDiv(_vars.$scrollContainer, _vars.$window, _vars.$footer, _vars.overrideOffsetBottom);

	return false;
	});
	}

	function resizeDiv($div, $window, $footer, overrideOffsetBottom) {
	if ($div.length > 0) {
	var offset;
	// visible element should have top,left > 0
	for (var i = 0; i < $div.length; i++) {
	offset = $($div[i]).offset();
	if (offset.top > 0 && offset.left > 0) break;
	// this data will be used if nothing found
	offset = { top: 0, left: 0 };
	}
	var offsetBorder = 20; // extra offset to account borders and other spaces
	var vieportWidth = $window.width();
	var vieportHeight = $window.height();
	// calc space from the top-left
	var offsetTop = offset.top + offsetBorder;
	var offsetLeft = offset.left + offsetBorder;

	// calc space from the bottom
	var offsetBottom = $footer.height();
	if (overrideOffsetBottom)
	offsetBottom = overrideOffsetBottom;

	// resize all divs
	$div.width(vieportWidth - offsetLeft);
	$div.height(vieportHeight - offsetTop - offsetBottom);
	}
	}

	function togglePage(show, hide) {
	$(".page" + hide).removeClass("visible").addClass("invisible");

	$(".page" + show).removeClass("invisible").addClass("visible");
	}
	</script>
	</head>

	<body>
	<div class="header"></div>
	<div class="container">
	<div><a class="page1c">page 1</a>\|<a class="page2c">page 2</a></div>
	<div class="page1 invisible">
	<div>1</div>
	<div>Some text before the scroll container</div>
	<div class="scroll-container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>11</div>
	<div>12</div>
	</div>
	</div>
	<div class="page2 visible">
	<div>2</div>
	<div class="scroll-container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>11</div>
	<div>12</div>
	</div>
	</div>

	</div>
	<div class="footer"></div>
	</body>
	</html>