cobbman/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
	<title>Auto-set div height to window</title>
	<meta author="BigWilliam">
	<meta description="How to set a div to the size of any browser window with jQuery"

</head>
<body style="margin:0;">
	<section id="intro" style="background:#666; color:white; margin:0; padding:0; text-align:center; width:100%;">
		<div id="intro-content" style="padding:25px; max-width: 600px; margin: 0 auto;">
			<h1>Auto set the div to the window height</h1>
			<p>This div's height will be automatically set to the height of the window when it is loaded. All the CSS and jQuery are in one page so you can see how it works.</p>
			<div id="say-height"></div>

		</div>
	</section>
	<section id="extra-stuff" style="padding:25px;">
		<p>All the content down here will be below the page window. This little practice page was made by <a href="http://bigwilliam.com">Big William</a> and inspired by: <a href="http://mixture.io/">mixture.io</a></p>
		<p>Just think of the possibilities, you could have an intro page up there, and then when they click a button it scrolls them down here. Yeah, the possibilities.</p>

	</section>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.8.2.min.js"><\/script>')</script>

<script type="text/javascript">

	var resizeStuff = function() {
		var winHeight = $(window).height();
		$('#intro').css('height', winHeight + 'px');
		$('#say-height').html('<p>Window height is: ' + winHeight + '</p>');
	}

	resizeStuff();
	$(window).resize(function() {
		resizeStuff();
	});


</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Auto-set div height to window</title>
	<meta author="BigWilliam">
	<meta description="How to set a div to the size of any browser window with jQuery"

	</head>
	<body style="margin:0;">
	<section id="intro" style="background:#666; color:white; margin:0; padding:0; text-align:center; width:100%;">
	<div id="intro-content" style="padding:25px; max-width: 600px; margin: 0 auto;">
	<h1>Auto set the div to the window height</h1>
	<p>This div's height will be automatically set to the height of the window when it is loaded. All the CSS and jQuery are in one page so you can see how it works.</p>
	<div id="say-height"></div>

	</div>
	</section>
	<section id="extra-stuff" style="padding:25px;">
	<p>All the content down here will be below the page window. This little practice page was made by <a href="http://bigwilliam.com">Big William</a> and inspired by: <a href="http://mixture.io/">mixture.io</a></p>
	<p>Just think of the possibilities, you could have an intro page up there, and then when they click a button it scrolls them down here. Yeah, the possibilities.</p>

	</section>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="jquery-1.8.2.min.js"><\/script>')</script>

	<script type="text/javascript">

	var resizeStuff = function() {
	var winHeight = $(window).height();
	$('#intro').css('height', winHeight + 'px');
	$('#say-height').html('<p>Window height is: ' + winHeight + '</p>');
	}

	resizeStuff();
	$(window).resize(function() {
	resizeStuff();
	});


	</script>

	</body>
	</html>