div background color beyong window height

**AmenKa** · 03-05-2011, 11:44 PM

Hey all, I have the height for a div set to 100% and the background color set to white. For some reason (in all browsers), the background color is always 100% height, even when the content overflows and the page scrolls. The background color only extends to the height of the window.

Relevant code:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<title>Site</title>
</head>

<body>
<div id="container">
  <div id="left">
  </div>
  <div id="right">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
</div>
</body>
</html>

css:

Code:

@charset "utf-8";
html, body {
	width: 100%;
	height: 100%;
	min-width: 760px;
	margin: 0px;
	color: #440B00;
	font-family: Arial, Helvetica, sans-serif;
	background: #440B00;
}
#container {
	position: absolute;
	width: 760px;
	height: 100%;
	left: 50%;
	margin-left: -380px;
}
#left {
	float: left;
	width: 160px;
	height: 100%;
	background: #FFD084;
}
#right {
	float: left;
	width: 600px;
	height: 100%;
	background: #FFFFFF;
}

**coothead** · 03-07-2011, 11:31 AM

Hi there AmenKa,

check out the attachment for a solution to your problem.

Further reading on the method used:-

Faux Columns

coothead

**AmenKa** · 03-07-2011, 09:17 PM

Thanks for the response, but I already have a similar optimized work around in place. I was hoping for something pure css or a reason why it is standards compliant for all of the browsers (even IE) to render the background color that way.

**molendijk** · 03-08-2011, 12:37 AM

I don't know if I understand you well, bur if you want the div with id=right to always cover the whole screen (vertically), then you should not have:

Code:

#right {
	float: left;
	width: 600px;
	height: 100%;
	background: #FFFFFF;
}

but

Code:

#right {position:relative;top:0px;bottom:0px;
	float: left;
	width: 600px;
	background:#FFFFFF;
}

Arie Molendijk.

**AmenKa** · 03-14-2011, 02:20 AM

Progress made. Yes, this is a good start. Now I need both the left and right divs to have the background color fill the page vertically.

Thread: div background color beyong window height

Thread Tools

Search Thread

div background color beyong window height

The Following User Says Thank You to coothead For This Useful Post:

The Following User Says Thank You to molendijk For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions