Layout HTML + CSS Header/Content/Footer - Como ocupar todo espaço disponível?

Assuntos Gerais
#1

Estou tentando criar um layout utilizando HTML + CSS, contendo HEADER, CONTENT e FOOTER.

Header e Footer tem tamanho fixo, mas a area content (central) precisa ter altura e largura dinâmica, de acordo com o tamanho da janela do navegador, ocupando todo o espaço entre o header e o footer.

O problema é que o tamanho do content está saindo de acordo com seu conteúdo (no caso, a altura comporta apenas o valor do texto “CONTENT”), mesmo com o height estando 100%.

O exemplo eu peguei aqui: http://jsfiddle.net/Kyle_Sevenoaks/5fryQ/

Como faço para a div “content” ocupar todo o espaço disponível entre header e footer?

Obrigado, galera.

<!DOCTYPE html> 
<html> 
	<head> 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
		<title> Teste</title> 
	  
	  
		<style type='text/css'> 
		body {
			margin:0;
			padding:0;
			height:100%;
		}
	 
		#wrap {
			height: 100%;
		}
		* html #wrap { height:100% }
		 
		#inner-wrap {
			padding-bottom:50px;
			min-height: 100%;
		}
		#inner-wrap:after {
			content:" ";
			display:block;
			clear:both;
		 
		}
		* html #inner-wrap {
			height:100%;
		}
		 
		#header
		{
			width: 100%;
			background-color: #C0C0C0;
			height: 16px;
			color: White;
			text-align: center;
			position: relative;
			top:0px;
		}
		#footer
		{
			width: 100%;
			background-color: #C0C0C0;
			height: 50px;
			position:absolute;
			bottom: 0;
			color: White;
			text-align: center;
		}

		#content
		{
			height: 100%;
			background-color: #F5FDEC;  
			margin: 0 auto 0 auto;
		}
	  </style> 

	</head> 
	<body> 
		<div id="wrap"> 
			<div id="header"> 
				HEADER
			</div> 
			<div id="inner-wrap"> 
				<div id="content"> 
					CONTENT
				</div> 
			</div> 
			<div id="footer"> 
				FOOTER
			</div> 
		</div>
	</body> 
</html>
#2