4 replies to this topic

[HEki_]

Hi,
i have a page with 3 divs ...
header
center
foot

now the header and center takes about 800px of screen height, now i need to fill in the bottom of the page, so that the foot div expans depending on the resolution of user ...

best regards,
heki

[Tyson D]

Hey HEki_! I'm pretty sure I can help you out with this. Just to make sure I understand what you mean by this let me double check. Are you trying to make the footer automatically fit the rest of the height of the page or are you trying to make the footer stay put at the very bottom of the 800px?

Footer that grows or footer that docks at the bottom? Or both?

Edit: I think you are wanting both, correct?

Edited by Tyson D, 31 July 2008 - 01:45 PM.

[HEki_]

hi
header and center are fixed size ... so footer always starts at same point it only needs to expand and fill up the rest of blank space at the bottom.
example:
resolution 800x640 (lol those were the times )
header 100px
center 400 px

foot ---> fills in the 140 px

but if someone comes with 1024*768 ress foot fills int 368px ...

thx for your reply!

[Tyson D]

That is definitely do-able. To achieve this you can actually do something like the method I will show you now:

The strategy is to have a container div with height set to 100%.

Inside the container we will have a header div 100px high as well as the "center" or content div which is 400px high.

Then after we've put those two divs inside the container we can just add our footer content below it!


So you could have something like this for your style sheet:

#container {
	height: 100%;
	min-height: 600px; /* For minimum 800x600 resolutions... */
	
	/* If using a background image for your footer put it here
		 * you might have to position it something like this:
	 * background-position: 0px 500px; If it is just an x-repeating
	 * background, otherwise it shouldn't matter. */
}


#header {
	height: 100px;
	
	/* Other stuff in here */
}


#center {
	height: 400px;
	
	/* Other stuff in here */
}

Then for your code you could lay it out something like this:

<div id="container">
	<div id="header">
		<!-- Header stuff in here -->
	</div>
	
	<div id="center">
		<!-- Your content in here -->
	</div>

	<p>Any footer stuff can just go here!!</p>
</div>

For the min-height business you'll want to look at using an expression for setting a minimum height in IE. If you get stuck with that let me know!

Cheers.

[HEki_]

thx works great!

how about the other solution? that a fixed hight div (lets say 40px) is always displayed at the bottom of the page? no mather the resolution of the viewer ...

thx!