Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 2869

Nov 11th, 2008

100% Doesn't Work

Expand Post »

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:

css Syntax (Toggle Plain Text)
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;
}
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:

html Syntax (Toggle Plain Text)
<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">
<br /><br /><br /><br /><br /><p><span class="footercont">
Footer
</span></p></div>
 
<div class="fill"></div> <!-- Fill -->
 
</div> <!-- Close -->
</center>
 
</body>
<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">
<br /><br /><br /><br /><br /><p><span class="footercont">
Footer
</span></p></div>

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

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

</body>

Many thanks to those who help me.

Similar Threads

svchost.exe 100% cpu usage pissing me off :( in Windows NT / 2000 / XP
100% CPU USAGE on and off! ;/ in Windows NT / 2000 / XP
height: 100% - cannot get this to work in HTML and CSS
CPU at 100% after installing broadband!?! in Windows NT / 2000 / XP
Can't get multimedia keys to work on mac keyboard in Apple Hardware and Devices

Agent Cosmic

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

51 posts
since Aug 2008

Permalink

Nov 11th, 2008

Re: 100% Doesn't Work

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

HTML and CSS Syntax (Toggle Plain Text)

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

Reputation Points: 37

Solved Threads: 1

Posting Whiz in Training

Offline

249 posts
since Jun 2004

Permalink

Nov 11th, 2008

Re: 100% Doesn't Work

add this to the head of the pages

HTML and CSS Syntax (Toggle Plain Text)
window.onload = function() {
divSize();
}
 
 
or <body onload="divSize();">
window.onload = function() {
divSize();
}


or <body onload="divSize();">

cmills83

Reputation Points: 37

Solved Threads: 1

Posting Whiz in Training

Offline

249 posts
since Jun 2004

Permalink

Nov 12th, 2008

Re: 100% Doesn't Work

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

Agent Cosmic

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

51 posts
since Aug 2008

Permalink

Nov 14th, 2008

Re: 100% Doesn't Work

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

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Nov 16th, 2008

Re: 100% Doesn't Work

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

ccube921

Reputation Points: 13

Solved Threads: 6

Junior Poster in Training

Offline

93 posts
since Oct 2008

Permalink

Nov 17th, 2008

Re: 100% Doesn't Work

Yes I did.

Agent Cosmic

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

51 posts
since Aug 2008

Permalink

Nov 18th, 2008

Re: 100% Doesn't Work

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

Reputation Points: 21

Solved Threads: 26

Posting Whiz in Training

Offline

240 posts
since Oct 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Input Button Background with i18n problem

Next Thread in HTML and CSS Forum Timeline: How do I upload my flash website to the internet?

DaniWeb Message

Cancel Changes

User Name
Password