[TUTORIAL] How do I make a website with 100% height

inno · 17th April 06, 10:53 AM

HTML Code:

<html>
<head>
	<style type="text/css">
	
		html, body {
			background:red;
			text-align:center;
			border:0;margin:0;padding:0;
			height:100%;
		}
		
		div#wrapper {
			background:white;
			width:700px;
			border:0;
			padding:0;
			margin:0 auto;  /* non-IE */
			height:auto;  /* non-IE */
			min-height:100%;  /* non-IE */
		}
		
		div#content {
			padding:1em;
			text-align:left;  /* IE */ 
		}

	</style>
	
<!--[if IE]> <!-- This is for IE so that it does really get 100& high -->
	<style type="text/css">
		div#wrapper {
			height:100%;  /* IE */
		}
	</style>
<![endif]-->
	
</head>
<body>

<div id="wrapper">

	<div id="content">
	
		<h1>Some</h1>
		
		<p>Random</p>
		
		<p>Content</p>
   
	</div>

</div>
  
</body>
</html>

* DO NOT post here if you have problems or questions * Post in help area.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Background height problem in FireFox but work in IE	EthanCote	Browser Compatibility	3	16th March 07 06:34 AM
[SOLVED] Help with Sticky Footer	wyclef	CSS	2	18th December 06 09:29 PM
List problem...	willsmith727	CSS	1	1st September 06 01:54 PM