July 27, 2008 01:35am pdt

1. hielo 121,248
2. Kravimir 89,300
3. Gertone 36,265
4. Steggs 27,950
5. b0lsc0tt 26,118
6. Xyptilon2 21,000
7. LordOfPo... 17,452
8. GreenGho... 16,875
9. mr_egypt... 15,300
10. mplungjan 14,810
11. dbrunton 14,100
12. Rouchie 14,000
13. jason1178 13,150
14. Roonaan 12,097
15. TName 11,500

1. Gertone 624,257
2. rdcpro 333,594
3. hielo 124,848
4. TName 102,130
5. Steggs 94,720
6. dualsoul 94,078
7. Kravimir 89,300
8. Zvonko 84,967
9. acperkins 80,890
10. VirusMinus 80,050
11. mplungjan 71,586
12. b1xml2 68,850
13. CEHJ 63,873
14. COBOLdi... 54,942
15. carl_tawn 54,907

05.08.2008 at 12:01AM PDT, ID: 23385246 | Points: 500

	[x] Attachment Details

How to use an absolute positioned footer in combination with resizing the browser window

Zones: Cascading Style Sheets (CSS), Extensible HTML (XHTML)

Tags: css scrollbar footer position absolute

Hello,

I created a simple website with a green header, a blue center and a red footer. The footer is absolute positioned at the bottom of the page. Mentioned below you can see the code for this website. I now have the following problem. If I resize the window (decrease the height) you can see move the footer up. At a certain moment a scrollbar appears. If I move the scrollbar down, then I see under the footer a blue area of the center. Besides that, if I decrease the height of the window further, the footer moves over the header, and you can't see the header anymore.

How can I change this behaviour? I want to have the footer at the bottom of the scrollable area, and not at the bottom of the viewable area.

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:

           
           
             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<style type="text/css">
HTML	
	{
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:13px;
	margin:0px;
	padding:0px;
	line-height: 16px;
	color:#000000;
	height:100%;
	}
 
BODY
	{
	margin:0px;
	height:100%;
	position:absolute;	
	}
 
.header{background-color:green;
	width:500px;
	height:50px;}
 
.center{background-color:blue;
	height:150px;height:auto !important;
	min-height:150px;}
 
.footer{background-color:red;
	width:500px;
	height:100px;
	position:absolute;
	bottom:0px;
}
</style>
 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Test</title>
	</head>
	
	<body>
		<div>
			<div class="header"></div>
			<div class="center"><span>center</span></div>
			<div class="footer"></div>
		</div>
	</body>
</html>

           
         

Start your free trial to view this solution

Question Stats

Zone: Web Development

Question Asked By: adiemeer

Question Asked On: 05.08.2008

Participating Experts: 1

Points: 500

Translate:

Loading Advertisement...

20080236-EE-VQP-29 / EE_QW_2_20070628