Keeping footer at bottom of page

dweb · July 19, 2014

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

fastsol · July 19, 2014

https://www.youtube.com/watch?v=Upc_fwaiosg

https://www.youtube.com/watch?v=FCDr0okbJaM

Arcalypse · July 23, 2014

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>

</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;
}

a100websolutions · August 4, 2014

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.

Strider64 · August 21, 2014

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 August 21, 2014 by Strider64

Sign In

Keeping footer at bottom of page

Recommended Posts

dweb

Link to comment

Share on other sites

fastsol

Link to comment

Share on other sites

Arcalypse

Link to comment

Share on other sites

a100websolutions

Link to comment

Share on other sites

Strider64

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information