954,598 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

100% Doesn't Work

I've been trying all methods to stretch the background color to fill 100% of the page but it doesn't work in Firefox 3. It just stretches to where the content is. It seems to work fine in IE 7, but there is some space to scroll up and down.

Here's my CSS:

body {
	height: 100%;
	background-color: #666;
	margin: 0px;
	margin-top: -1px;
	background-image: url(Background.jpg);
}

.container {
	height: 100% !important;
	min-height: 100%;
	background-color: #252525;
	width: 80%;
	min-width: 1000px;
	max-width: 1400px;
	border: #444 1px solid;
	margin: 0px;
}


And this is my HTML:

<body>

<center>
<div class="container"> <!-- Open -->
<div class="header"></div> <!-- Header -->

<!--       Content      -->
<div class="page">
<div class="content">Content</div><div class="sidebar"> Sidebar </div>
</div>

<!--    Footer     -->
<div class="footer">
<p><span class="footercont">
Footer
</span></p></div>

<div class="fill"></div> <!-- Fill -->

</div> <!-- Close -->
</center>

</body>


Many thanks to those who help me.

Agent Cosmic
Junior Poster in Training
51 posts since Aug 2008
Reputation Points: 10
Solved Threads: 0
 

yea never gotten 100% height working in all browsers w/o js. change your .container to #container

function divSize() {
	winH = document.body.offsetHeight;
	totalHeight = document.getElementById('container').offsetHeight;
if(winH > totalHeight) {
 document.getElementById('container').style.height=winH + "px";
}

window.onresize = function() {
	divSize();
}


If the div is less than the window height it changes the div height to match the window, if its greater then the 100% will work fine. Also when the window is resized it changes the height to make sure its up to date.

cmills83
Posting Whiz in Training
249 posts since Jun 2004
Reputation Points: 37
Solved Threads: 1
 

add this to the head of the pages

window.onload = function() {
divSize();
}


or <body onload="divSize();">
cmills83
Posting Whiz in Training
249 posts since Jun 2004
Reputation Points: 37
Solved Threads: 1
 

Do I need to do anything to the html, cause it ain't working.

Agent Cosmic
Junior Poster in Training
51 posts since Aug 2008
Reputation Points: 10
Solved Threads: 0
 

It can't be done.

The web is NOT designed to fill a screen. You provide content, and it expands downward to fill whatever area is needed, running off the screen downward if necessary.

Remember that different computers have different resolutions. Combine that with different browsers, and it is quite impossible to make a web page that fits into a screen.

IE has nonstandard extensions to do this, but nobody else implements them.

MidiMagic
Nearly a Senior Poster
3,319 posts since Jan 2007
Reputation Points: 730
Solved Threads: 182
 

have you tried: html
{
background-color: .............
}

ccube921
Junior Poster in Training
93 posts since Oct 2008
Reputation Points: 13
Solved Threads: 6
 

Yes I did.

Agent Cosmic
Junior Poster in Training
51 posts since Aug 2008
Reputation Points: 10
Solved Threads: 0
 

You may want to check this blog posting.

http://ryanfait.com/sticky-footer/
I think you can modify it in order to achieve your goals. Hope it solves your issue.

Rhyan
Posting Whiz in Training
240 posts since Oct 2006
Reputation Points: 21
Solved Threads: 26
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You