Fixing Header and Footer & Scroll able Content

Today i found a simple way to fix the Header and Footer of the HTML page to top and bottom respectively and make the content scroll able, it will be useful when we have list of items and fixed header & footer in mobile applications. 

Here is the HTML you have to use

	<header>
	Web App Template
	</header>
	<div id="wrapper">
	<div id="scroll-content">
	<ul>
	<li>Some Stuff</li>
	<li>More Stuff</li>
	<li>Big Stuff</li>
	<li>Small Stuff</li>
	<li>Geek Stuff</li>
	<li>Nerd Stuff</li>
	<li>Fast Stuff</li>
	<li>Slow Stuff</li>
	<li>Good Stuff</li>
	<li>Bad Stuff</li>
	<li>Your Stuff</li>
	<li>My Stuff</li>
	<li>Their Stuff</li>
	<li>Our Stuff</li>
	<li>Super Stuff</li>
	<li>Uber Stuff</li>
	<li>Stuff Stuff</li>
	<li>French Stuff</li>
	<li>German Stuff</li>
	<li>English Stuff</li>
	<li>American Stuff</li>
	<li>Stuff</li>
	</ul>
	</div>
	</div>
	<footer>
	Some Footer Content
	</footer>

view raw gistfile1.html hosted with ❤ by GitHub

Here is the CSS you have to use.

	body,ul,li {
	padding:0;
	margin:0;
	border:0;
	}
	body {
	font-family:helvetica;
	}
	header{
	position:fixed;
	z-index:2;
	top:0; left:0;
	width:100%;
	height:45px;
	padding:0;
	}
	footer {
	position:fixed;
	z-index:2;
	bottom:0; left:0;
	width:100%;
	height:48px;
	padding:0;
	border-top:1px solid #444;
	}
	header, footer{
	font-size:20px;
	text-align:center;
	color:#f3f3f3;
	font-weight:bold;
	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
	line-height:45px;
	opacity: 0.6;
	}
	#wrapper {
	z-index:1;
	padding: 45px 0 48px 0;
	width:100%;
	background:#aaa;
	}
	#scroll-content {
	z-index:1;
	padding:0;
	-webkit-overflow-scrolling:touch;
	overflow:auto;
	}
	ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
	}
	li {
	padding:0 10px;
	height:40px;
	line-height:40px;
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	font-size:14px;
	}

view raw gistfile1.css hosted with ❤ by GitHub