höjd och bakgrundsproblem i FF och IE7

Liknande problem har tagits upp 1000 ggr. men jag hittar inte nån lösning i dem.

Hur får jag #layout att alltid visas över hela sidan oavsett textmängd?

Med koden nedan ser det snyggt ut då textmängden är högre än höjden på webläsaren, men är textmängden mindre så visas inte #layout ända ner.

Kommenterar jag bort så att #body har height:100% så blir det tvärtom:
liten textmängd snyggt, mycket text fult!

Går det att få till tror ni?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<style type="text/css">
		html {
			height:100%;
		}
		
		* html body {
			height:100%;
		}
		
		#body {
			background:#dadada;
			text-align:center;
			min-height:100%;
			/*height:100%; */
			margin:0;
			padding:0;
		}
		
		#layout {
			margin:0 auto;
			padding:0;
			width:750px;
			height:100%;
			background:#ffffff;
		}
		
		p {
			margin:0;
			padding:0;
		}
		</style>
	</head>
	
	<body id="body">
		<div id="layout">
				<p>dsfsdfsdfsd</p>
				<p>f</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>g</p>
				<p>&nbsp;</p>
		</div>
	</body>
</html>