Log in

View Full Version : 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:


<!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:


@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 (http://www.google.com/search?q=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:

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

#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.