Jump to content

Keeping footer at bottom of page


dweb

Recommended Posts

Hi

 

I want to get my <footer> to appear at the bottom of my page, but I dont want it to be fixed there.

 

So if the middle contents of a page is very short, the <footer> will be visibled at the bottom of the browser, but if the page contents is long, then the <footer> would just disappear at the bottom of the contents.

 

Can this be done?

 

Thanks

Link to comment
Share on other sites

Fastsol gave a superb answer! That's exactly how I would have done it as well! I have drawn up a test page for you to fiddle around with. This test page includes several lines of code so that you can check and see how it functions at the bottom of the page. Remove these lines and it will still stick to the bottom of the page quite nicely. With that being said here's the link.

 

http://jsfiddle.net/Y4VfZ/2/

 

Here is also a copy of the code...

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title> Test Page </title>
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="content">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed bibendum nunc. Suspendisse fringilla a nisi eu consectetur. Etiam hendrerit, tellus vel consectetur pulvinar, velit sapien imperdiet urna, in bibendum ante purus non ligula. Vestibulum venenatis leo purus, at cursus sapien rhoncus non. Duis in orci eu elit porta aliquam. Aliquam pulvinar varius imperdiet. Duis dignissim lacus augue.<br><br>

	Phasellus nec ultrices massa. Phasellus porta dignissim sem in convallis. Ut lorem felis, feugiat quis fermentum a, ultrices semper nisl. Phasellus ac nisi nec ante cursus sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum pulvinar facilisis ultrices. Curabitur sodales bibendum fringilla. Phasellus cursus interdum ultrices. In sed tortor eu neque accumsan vestibulum a non turpis. Nunc non scelerisque ligula.<br><br>

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed bibendum nunc. Suspendisse fringilla a nisi eu consectetur. Etiam hendrerit, tellus vel consectetur pulvinar, velit sapien imperdiet urna, in bibendum ante purus non ligula. Vestibulum venenatis leo purus, at cursus sapien rhoncus non. Duis in orci eu elit porta aliquam. Aliquam pulvinar varius imperdiet. Duis dignissim lacus augue.<br><br>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed bibendum nunc. Suspendisse fringilla a nisi eu consectetur. Etiam hendrerit, tellus vel consectetur pulvinar, velit sapien imperdiet urna, in bibendum ante purus non ligula. Vestibulum venenatis leo purus, at cursus sapien rhoncus non. Duis in orci eu elit porta aliquam. Aliquam pulvinar varius imperdiet. Duis dignissim lacus augue.<br><br>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed bibendum nunc. Suspendisse fringilla a nisi eu consectetur. Etiam hendrerit, tellus vel consectetur pulvinar, velit sapien imperdiet urna, in bibendum ante purus non ligula. Vestibulum venenatis leo purus, at cursus sapien rhoncus non. Duis in orci eu elit porta aliquam. Aliquam pulvinar varius imperdiet. Duis dignissim lacus augue.<br><br>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed bibendum nunc. Suspendisse fringilla a nisi eu consectetur. Etiam hendrerit, tellus vel consectetur pulvinar, velit sapien imperdiet urna, in bibendum ante purus non ligula. Vestibulum venenatis leo purus, at cursus sapien rhoncus non. Duis in orci eu elit porta aliquam. Aliquam pulvinar varius imperdiet. Duis dignissim lacus augue.<br><br>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed bibendum nunc. Suspendisse fringilla a nisi eu consectetur. Etiam hendrerit, tellus vel consectetur pulvinar, velit sapien imperdiet urna, in bibendum ante purus non ligula. Vestibulum venenatis leo purus, at cursus sapien rhoncus non. Duis in orci eu elit porta aliquam. Aliquam pulvinar varius imperdiet. Duis dignissim lacus augue.<br><br>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed bibendum nunc. Suspendisse fringilla a nisi eu consectetur. Etiam hendrerit, tellus vel consectetur pulvinar, velit sapien imperdiet urna, in bibendum ante purus non ligula. Vestibulum venenatis leo purus, at cursus sapien rhoncus non. Duis in orci eu elit porta aliquam. Aliquam pulvinar varius imperdiet. Duis dignissim lacus augue.<br><br>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed bibendum nunc. Suspendisse fringilla a nisi eu consectetur. Etiam hendrerit, tellus vel consectetur pulvinar, velit sapien imperdiet urna, in bibendum ante purus non ligula. Vestibulum venenatis leo purus, at cursus sapien rhoncus non. Duis in orci eu elit porta aliquam. Aliquam pulvinar varius imperdiet. Duis dignissim lacus augue.<br><br>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed bibendum nunc. Suspendisse fringilla a nisi eu consectetur. Etiam hendrerit, tellus vel consectetur pulvinar, velit sapien imperdiet urna, in bibendum ante purus non ligula. Vestibulum venenatis leo purus, at cursus sapien rhoncus non. Duis in orci eu elit porta aliquam. Aliquam pulvinar varius imperdiet. Duis dignissim lacus augue.<br><br>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed bibendum nunc. Suspendisse fringilla a nisi eu consectetur. Etiam hendrerit, tellus vel consectetur pulvinar, velit sapien imperdiet urna, in bibendum ante purus non ligula. Vestibulum venenatis leo purus, at cursus sapien rhoncus non. Duis in orci eu elit porta aliquam. Aliquam pulvinar varius imperdiet. Duis dignissim lacus augue.<br><br>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed bibendum nunc. Suspendisse fringilla a nisi eu consectetur. Etiam hendrerit, tellus vel consectetur pulvinar, velit sapien imperdiet urna, in bibendum ante purus non ligula. Vestibulum venenatis leo purus, at cursus sapien rhoncus non. Duis in orci eu elit porta aliquam. Aliquam pulvinar varius imperdiet. Duis dignissim lacus augue.<br><br>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed bibendum nunc. Suspendisse fringilla a nisi eu consectetur. Etiam hendrerit, tellus vel consectetur pulvinar, velit sapien imperdiet urna, in bibendum ante purus non ligula. Vestibulum venenatis leo purus, at cursus sapien rhoncus non. Duis in orci eu elit porta aliquam. Aliquam pulvinar varius imperdiet. Duis dignissim lacus augue.<br><br>
	
	
</div>

<div class="footer">
	Footer
</div>
</body>
</html>

And here is the CSS...

html, body
{
	margin: 0px;
	padding: 0px;
	font-family: Helvetica;
	font-size: 12px;
	display: table;
	font-size: 12px;
	width: 100%;
	height: 100%;
}

.content
{
	height: auto;
}

.footer
{
	background: #282828; /* Charcoal */
	color: #FFFFFF; /* White */
	display: table-row;
	height: 30px;
	text-align: center;
	line-height: 27px;
}
Link to comment
Share on other sites

  • 2 weeks later...

If you just want a simple CSS solution -

body{
min-height: 1000px;
max-height: auto;
overflow-y : auto;
}

The above code will make sure that your <footer> always starts after a minimum height of 1000px. So, when content is less, footer starts after 1000px and if body content is big, it automatically gets pushed down. 

Link to comment
Share on other sites

  • 3 weeks later...

If you just want a simple CSS solution -

body{
min-height: 1000px;
max-height: auto;
overflow-y : auto;
}

The above code will make sure that your <footer> always starts after a minimum height of 1000px. So, when content is less, footer starts after 1000px and if body content is big, it automatically gets pushed down. 

Oops, I didn't see the overflow-y, but I still don't like the solution for the simple fact that you are relying on information that could possibly be discarded (from a design point of view in the future) because of the overflow.  Though it does work.

Edited by Strider64
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.