Another 100% Height Problem

**globex** · 02-03-2008, 11:29 PM

Hello,

I'm trying to make a CSS Layout with a fixed header at the top and a fixed footer always at the very bottom of the page. In the middle, the container is supposed to have 100% and inside the container will be elements (also with 100%, but this time relative to the container).

As soon as I create elements inside the container with 100% height, my layout stretches beyond 100% of the browser window. Any ideas?

HTML Code:

<html>

<style>
html, body {
	background: black;
	height: 100%;
	margin: 0;
	padding: 0;
}

#Header {
	background: green;
	height: 60px;
	min-width: 1025px;
	width: 100%;
}

#Wrapper {
	background: white;
	margin: 0 auto;
	padding: 0;
	position: relative;
	overflow: hidden;
	width: 1024;
}

	#MainTable {
		background: yellow;
		float: left;
		height: 100%;
		margin: 0;
		padding: 0;
		width: 644px;
	}
	
	#SideBar {
		background: orange;
		float: right;
		height: 100%;
		margin: 0;
		padding: 0;
		width: 275px;
	}

#Footer {
	background: red;
	bottom: 0;
	height: 80px;
	position: absolute;
	width: 100%;
}

</style>

<body>

	<div id="Header"></div>

	<div id="Wrapper">
		<div id="MainTable"></div>
		<div id="SideBar"></div>
	</div>
	
	<div id="Footer"></div>

</body>
</html>

**BLiZZaRD** · 02-04-2008, 01:45 PM

have a look at this tutorial about forcing footers to the bottom.

Thread: Another 100% Height Problem

Thread Tools

Search Thread

Another 100% Height Problem

Bookmarks

Bookmarks

Posting Permissions