HTML and CSS

100% Doesn't Work

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Aug 2008

Posts: 21

Reputation: Agent Cosmic is an unknown quantity at this point

Solved Threads: 0

Agent Cosmic Agent Cosmic is offline

Offline

Newbie Poster

100% Doesn't Work

Nov 11th, 2008

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:

 Help with Code Tags 
 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:

 Help with Code Tags 
 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.

CLICK---> GeekPolice

•

Join Date: Jun 2004

Posts: 247

Reputation: cmills83 is an unknown quantity at this point

Solved Threads: 1

cmills83

Offline

Posting Whiz in Training

Re: 100% Doesn't Work

Nov 11th, 2008

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

Help with Code Tags

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.

•

Join Date: Jun 2004

Posts: 247

Reputation: cmills83 is an unknown quantity at this point

Solved Threads: 1

cmills83

Offline

Posting Whiz in Training

Re: 100% Doesn't Work

Nov 11th, 2008

add this to the head of the pages

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


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

•

Join Date: Aug 2008

Posts: 21

Reputation: Agent Cosmic is an unknown quantity at this point

Solved Threads: 0

Agent Cosmic Agent Cosmic is offline

Offline

Newbie Poster

Re: 100% Doesn't Work

Nov 12th, 2008

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

CLICK---> GeekPolice

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: 100% Doesn't Work

Nov 14th, 2008

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.

Daylight-saving time uses more gasoline

•

Join Date: Oct 2008

Posts: 76

Reputation: ccube921 is an unknown quantity at this point

Solved Threads: 6

ccube921

Offline

Junior Poster in Training

Re: 100% Doesn't Work

Nov 16th, 2008

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

•

Join Date: Aug 2008

Posts: 21

Reputation: Agent Cosmic is an unknown quantity at this point

Solved Threads: 0

Agent Cosmic Agent Cosmic is offline

Offline

Newbie Poster

Re: 100% Doesn't Work

Nov 17th, 2008

Yes I did.

CLICK---> GeekPolice

•

Join Date: Oct 2006

Posts: 232

Reputation: Rhyan is an unknown quantity at this point

Solved Threads: 24

Rhyan

Offline

Posting Whiz in Training

Re: 100% Doesn't Work

Nov 18th, 2008

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.

" Of all the things I've lost,
I miss my mind the most...."
Mark Twain