Content (Fluid Width)

A simple app like layout with a fixed width sidebar (300px) and a fluid width content area. jQuery has been used to ensure that both elements stretch to the full height of the browser window – overflowed content will scroll separately on both the sidebar and content area.

HTML

<div id="page"> 
	<header id="sidebar"> 
		//SIDEBAR CONTENT HERE
	</header> 

	<article id="contentWrapper"> 
		<section id="content"> 
			//CONTENT HERE
		</section> 
	</article> 
</div>

CSS

html {
	overflow: hidden;
}

#sidebar { 
	background: #eee;
	float: left;
	left: 300px;
	margin-left: -300px;
	position: relative;
	width: 300px;
	overflow-y: auto;
}

#contentWrapper { 
	float: left;
	width: 100%;
}

#content {
	background: #ccc;
	margin-left: 300px;
	overflow-y: auto;
}

Javascript

$(document).ready(function() {

	//GET BROWSER WINDOW HEIGHT
	var currHeight = $(window).height();
	//SET HEIGHT OF SIDEBAR AND CONTENT ELEMENTS
	$('#sidebar, #content').css('height', currHeight);

	//ON RESIZE OF WINDOW
	$(window).resize(function() {

		//GET NEW HEIGHT
		var currHeight = $(window).height();	
		//RESIZE BOTH ELEMENTS TO NEW HEIGHT
		$('#sidebar, #content').css('height', currHeight);

	});

});