this is my code for my footer, how can i make it display at the bottom of the page rather than right underneath my content above it?
/*footer */
#footer .column {
float: left;
width: 25%;
}
#footer .column div {
margin: 5px;
height: 200px;
background: #eeeeee;
}
<div id="footer">
<div class="column"><div></div></div>
<div class="column"><div></div></div>
<div class="column"><div></div></div>
<div class="column"><div></div></div>
</div>
Note: This does NOT need to be a fixed footer
There's really two main options:
Fixed Footer - the footer always is visible at the bottom of the page
Pushed Footer - the footer is pushed to the bottom of the page even when the content doesn't fill the window
The easier of the two is the fixed footer.
Fixed Footer
To make the footer fixed, in CSS set the footer's position to fixed position:fixed and position the footer to the bottom of the page bottom:0px. Here's a code snippet from CSS-Tricks.
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
Pushed Footer
A pushed footer is a bit trickier. Here's a great graphic showing why the footer doesn't stay at the bottom of the page when there isn't enough content:
Basically, the problem is happening because the footer element is 'pushed' under the element that is above it and the height of that element isn't as long as the height of the page. In order to fix this, you need to make sure that the footer gets 'pushed' down the full height of the page (minus the height of your footer).
Here's how to do it:
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html, body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
Here's a more detailed tutorial on how to do it as well as the source of the code above.
And here's a working demo of the code from the same source.
Bootstrap have an example of a footer that sticks to the bottom of the page here:
https://getbootstrap.com/examples/sticky-footer/
Here is the CSS:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Then in the HTML:
<footer class="footer">
</footer>
Fixed your footer in bottom with cool effect
Check full page design in jsfiddle Jsfiddle
<body>
<header>
<ul>
<li>Home</li>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</header>
<div class="wrapper">
<div class="demo">
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
</div>
</div>
<footer>
<h1>kulbhushan charaya</h1>
</footer>
</body>
and css is
body {
background: #ffffff none repeat scroll 0 0;
padding:40px 0;
}
header{
position:fixed;
top:0;
z-index:999;
left:0;
width:100%;
background:#fff;
border-bottom:1px solid #ccc;
}
header ul li {
display: inline-block;
list-style: outside none none;
padding: 5px;
}
header ul li a {
color: #000000;
text-decoration: none;
}
footer {
bottom: 0;
left: 0;
position: fixed;
text-align: center;
width: 100%;
z-index: -1;
}
footer h1 {
margin: 0;
}
.wrapper {
background: #ffffff;
padding: 0 15px;
z-index: 1;
}
if anyone is stuck with this again, this is a modern solution without hacks
HTML:
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
CSS:
/**
* Demo Styles
*/
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles
*/
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
I solved this by simply using min-height on the main container of my HTML.
So HTML:
<body>
<div class="top-nav">My Nav Bar</div>
<div class="main-container">
All my content
</div>
<div class="footer">
My footer
</div>
</body>
and then CSS
.top-nav {
height: 4rem;
}
.main-container {
min-height: calc(100vh - 4rem - 4rem);
}
.footer {
height: 4rem;
}
With SCSS you can use variables to track the top-nav and footer heights and then do something like
.main-container {
min-height: calc(100vh - #{$top-nav-height} - #{$footer-height});
}
This is not a perfect solution because it won't put your footer exactly at the bottom of the viewport but it will push it down to the bottom when the content is too short and prevents the footer from being way up in middle of the screen.
you may need to set the html element height to 100%, otherwise your page itself will only be the necessary height for your content. I ran into this myself.
#main {padding-bottom: 150px;} /* Should have the same value of footer's height */
#footer {position: relative;
margin-top: -150px; /* footer's height */
I guess what you mean is that you would like the footer to remain at the bottom of the page, even when there is insufficient content on the page to fill the height of the viewport?
If that is the case, you can use this trick: CSS sticky footer - http://ryanfait.com/sticky-footer/, http://www.cssstickyfooter.com/ or http://css-tricks.com/snippets/css/sticky-footer/
The sticky footer trick typically relies on declaring a minimum-height on a wrapper div. This means that you will have to reformat your HTML code as follow:
<div id="wrap">
<div id="content">
/* Main body content */
</div>
</div>
<div id="footer">
/* Footer content here */
</div>
For the CSS:
html, body, #wrap {
height: 100%;
}
#wrap {
height: auto;
min-height: 100%;
}
#content {
overflow: hidden;
padding-bottom: (footer height);
}
#footer {
position: relative;
margin-top: -(footer height); /* Note the negative value */
height: (footer height);
clear:both;
}
If your footer may have variable height, you will have to set the bottom padding of #content, and top margin of #footer with JavaScript. The value depends on the computed height of the #footer element itself.
Material Design Bootstrap has a great class: fixed-bottom. It is what I use.
You need to set the height of the parent after the footer automatically sets their position at the bottom.
if you can't add content or height in parent div or section of footer after this problem occurs.
Just use flex-box: By setting the body display to flex and then aligning the footer to flex end. This way the footer will always be the last component at the end.
body {
display: flex;
flex-direction: column;
}
footer {
align-self: flex-end;
}
Related
I have the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer which I can't make sit at the bottom of the page.
I want the footer to
stick to the window bottom when the page is short and the screen is not filled, and
stay at the document end and move down as normal when there is more than a screenful of content (instead of overlapping the content).
The CSS is inherited and befuddles me. I can't seem to change it properly to put a minimum height on the content or make the footer go to the bottom.
Below are 4 different methods of mine:
In each example the texts are freely-editable to illustrate how the content would render in different scenarios.
1) Flexbox
body{ min-height: 100vh; margin:0; }
header{ min-height:50px; background:lightcyan; }
footer{ min-height:50px; background:PapayaWhip; }
/* The article fills all the space between header & footer */
body{ display:flex; flex-direction:column; }
article{ flex:1; }
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>
2) Grid
body{
min-height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
header{
min-height:50px;
background:lightcyan;
}
footer{
min-height:50px;
background:PapayaWhip;
}
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>
This method below uses a "trick" by placing an ::after pseudo-element on the body, and set it to have the exact height of the footer, so it will occupy the exact same space the footer does, so when the footer is absolute positioned over it, it would appear like the footer is really taking up space and eliminate the negative affects of it's absolute positioning (for example, going over the body's content)
3) position:absolute (no dynamic footer height)
body{ min-height:100vh; margin:0; position:relative; }
header{ min-height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }
/* Trick: */
body {
position: relative;
}
body::after {
content: '';
display: block;
height: 50px; /* Set same as footer's height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>
4) Table-layout
html{ height:100%; }
body { min-height:100%; margin:0; }
header {
height: 50px;
background: lightcyan;
}
article {
height: 1%;
}
footer {
height: 50px;
background: PapayaWhip;
}
/**** Trick: ****/
body {
display: table;
width: 100%;
}
body > footer {
display: table-row;
}
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>
A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.
Give the footer a negative margin-top:
footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;
}
A very simple approach which works great cross browser is this:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
A very simple flex solution that does not assume fixed heights or changing position of elements.
HTML
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
CSS
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
Browser Support
All major browsers, except IE11 and below.
Make sure to use Autoprefixer for appropriate prefixes.
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
/////////////////////////////////////////////
body,
html {
margin: 0;
padding: 0;
}
header,
main,
footer {
margin: 0;
display: block;
}
header,
footer {
min-height: 80px;
}
header {
background-color: #ccc;
}
main {
background-color: #f4f4f4;
}
footer {
background-color: orange;
}
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
I've used this to stick my footer to the bottom and it worked for me:
HTML
<body>
<div class="allButFooter">
<!-- Your page's content goes here, including header, nav, aside, everything -->
</div>
<footer>
<!-- Footer content -->
</footer>
</body>
That's the only modification you have to do in the HTML, add that div with the "allButFooter" class. I did it with all the pages, those that were so short, I knew the footer wouldn't stick to the bottom, and also pages long enough that I already knew I had to scroll. I did this, so I could see that it works ok in the case that a page's content is dynamic.
CSS
.allButFooter {
min-height: calc(100vh - 40px);
}
The "allButFooter" class has a min-height value that depends on the viewport's height (100vh means 100% of the viewport height) and the footer's height, that I already knew was 40px.
That's all I did, and it worked perfectly for me. I haven't tried it in every browser, just Firefox, Chrome and Edge, and the results were as I wanted. The footer sticks to the bottom, and you don't have to mess with z-index, position, or any other properties. The position of every element in my document was the default position, I didn't change it to absolute or fixed or anything.
Working with responsive design
Here's something I would like to clear out. This solution, with the same Footer that was 40px high didn't work as I expected when I was working in a responsive design using Twitter-Bootstrap. I had to modify the value I was substracting in the function:
.allButFooter {
min-height: calc(100vh - 95px);
}
This is probably because Twitter-Bootstrap comes with its own margins and paddings, so that's why I had to adjust that value.
From IE7 onwards you can simply use
#footer {
position:fixed;
bottom:0;
}
See caniuse for support.
Keep the footer at the bottom by using Flexbox
<div style="min-height:100vh; display:flex; flex-direction:column;
justify-content:space-between;">
<div> <!-- Wrapper (Without footer) -->
<header>
I am a header.
</header>
<article>
I am an article!
</article>
</div> <!-- End: Wrapper (Without footer) -->
<footer>
I am a footer.
</footer>
</div>
Note
Make sure that you are wrapping everything in a <div> or any other block-level element with the following CSS styles: min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; .
Make sure that you are wrapping everything but the footer element in a <div> or any other block-level element.
Make sure that you using <footer> or any other block-level element to wrap the footer.
Code Explanation
min-height: 100vh ensures that the body element will stretch to at least the full height of the screen
flex-direction: column keeps the behavior of normal document flow in terms of retaining stacked block elements (which assumes direct children of the body are all indeed block elements).
justify-content:space-between pushes the footer to the bottom of the screen.
Check out how to do the same (Keeping the footer at the bottom) by using Bootstrap 5 - Link
A simple solution that i use, works from IE8+
Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.
JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/
Css
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
Html
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
Yet, another really simple solution is this one:
html, body {
height: 100%;
width: 100%;
margin: 0;
display: table;
}
footer {
background-color: grey;
display: table-row;
height: 0;
}
jsFiddle
The trick is to use a display:table for the whole document and display:table-row with height:0 for the footer.
Since the footer is the only body child that has a display as table-row, it is rendered at the bottom of the page.
Do this
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>
You can also read about flex it is supported by all modern browsers
Update: I read about flex and tried it. It worked for me. Hope it does the same for you. Here is how I implemented.Here main is not the ID it is the div
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: block;
flex: 1 0 auto;
}
Here you can read more about flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Do keep in mind it is not supported by older versions of IE.
This is known as a sticky footer. A google search for it comes up with a lot of results. A CSS Sticky Footer is the one I've used successfully. But there are more.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
Source for this code
This is how I solved the same issue
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
footer {
margin-top:calc(5% + 60px);
}
This works fine
One thing to be wary of is mobile devices, since they implement the idea of the viewport in an 'unusual' way:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25
As such, using position: fixed; (as I've seen recommended in other places) usually isn't the way to go. Of course, it depends upon the exact behaviour you're after.
What I've used, and has worked well on desktop and mobile, is:
<body>
<div id="footer"></div>
</body>
with
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}
#footer {
position: absolute;
bottom: 0;
}
I just answered as similar question in here:
Position footer at bottom of page having fixed header
I'm pretty new at web development, and I know this has been answered already, but this is the easiest way I found to solve it and I think is somehow different. I wanted something flexible because the footer of my web app has a dynamic height, I ended up using FlexBox and a spacer.
Start by setting the height for your html and body
html, body {
height: 100%;
display: flex;
flex-direction: column;
margin: 0px;
}
I'm assuming a column behavior for our app, in the case you need to add a header, hero or any content vertically aligned.
Create the spacer class
.spacer {
flex: 1;
}
So later on your HTML could be something like
<html>
<body>
<header> Header </header>
Some content...
<div class='spacer'></div>
<footer> Footer </footer>
</body>
</html>
You can play with it here
https://codepen.io/anon/pen/xmGZQL
Works for me.
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
My jQuery method, this one puts the footer at the bottom of the page if the page content is less than the window height, or just puts the footer after the content otherwise:
Also, keeping the code in it's own enclosure before other code will reduce the time it takes to reposition the footer.
(function() {
$('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
I achieved that using CSS grid, basically I defined 3 rows:
Header
content
footer
And the used grid to define the sizes, the trick is to align the footer at the end of the row, like this:
CSS
body {
display: grid;
grid-template-rows: auto auto auto;
}
footer {
display: grid;
align-self: end; /* The trick */
}
HTML file
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header>
Header content
</header>
<h1>main body</h1>
<p>This is a paragraph.</p>
<footer>
<p>Hello there.</p>
</footer>
</body>
</html>
You can use more rows but remember to add the to the CSS, or wrap everything inside a div.
This guide here really helped me figure this out.
You need to use position: absolute; this is important, then bottom:0
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
ONE line solution using Bootstrap
Apart from all the CSS and jQuery solutions provided,
I have listed a solution using Bootstrap with a single class declaration on body tag: d-flex flex-column justify-content-between
This DOES NOT require knowing the height of the footer ahead of time.
This DOES NOT require setting position absolute.
This WORKS with dynamic divs that overflow on smaller screens.
html, body {
height: 100%;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body class="d-flex flex-column justify-content-between text-white text-center">
<header class="p-5 bg-dark">
<h1>Header</h1>
</header>
<main class="p-5 bg-primary">
<h1>Main</h1>
</main>
<footer class="p-5 bg-warning">
<h1>Footer</h1>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
I consider you can set the main content to viewport height, so if the content exceeds, the height of the main content will define the position of the footer
* {
margin: 0;
padding: 0;
width: 100%;
}
body {
display: flex;
flex-direction: column;
}
header {
height: 50px;
background: red;
}
main {
background: blue;
/* This is the most important part*/
height: 100vh;
}
footer{
background: black;
height: 50px;
bottom: 0;
}
<header></header>
<main></main>
<footer></footer>
I have myself been looking into this problem. I have seen quite a few solutions and each of them had issues, often involving some magic numbers.
So using best practices from various sources I came up with this solution:
http://jsfiddle.net/vfSM3/248/
The thing I wanted to achieve specifically here was to get the main content to scroll between footer and header inside green area.
Here is a simple CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 4em;
background-color: red;
position: relative;
z-index: 1;
}
.content {
background: white;
position: absolute;
top: 5em;
bottom: 5em;
overflow: auto;
}
.contentinner {
}
.container {
height: 100%;
margin: -4em 0 -2em 0;
background: green;
position: relative;
overflow: auto;
}
footer {
height: 2em;
position: relative;
z-index: 1;
background-color: yellow;
}
What I did
Html
<div>
<div class="register">
/* your content*/
</div>
<div class="footer" />
<div/>
CSS
.register {
min-height : calc(100vh - 10rem);
}
.footer {
height: 10rem;
}
Don't need to use position fixed and absolute. Just write the html in proper way.
You can do this
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
Position fixed with bottom, left, and right set to 0 works best for me:
.footer {
position: fixed;
background : #d1ccc0;
bottom : 0;
left : 0;
right : 0;
height : 50px;
}
Position absolute doesn't stick to the bottom, but fixed does.
Just customize the footer section
.footer
{
position: fixed;
bottom: 0;
width: 100%;
padding: 1rem;
text-align: center;
}
<div class="footer">
Footer is always bootom
</div>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
It's actually very simple. This solution doesn't require to know footer height.
<body>
<div class="app">
Website
</div>
<div class="footer">
Footer
</div>
</body>
.app {
min-height: 100vh;
}
In comparisson to other solutions, one does not need to add extra containers. Therefor this solution is a bit more elegant. Beneath the code example I'll explain why this works.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
html
{
height:100%;
}
body
{
min-height:100%;
padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
margin:0; /*see above comment*/
}
body
{
position:relative;
padding-bottom:60px; /* Same height as the footer. */
}
footer
{
position:absolute;
bottom:0px;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<header>header</header>
<footer>footer</footer>
</body>
</html>
So the first thing we do, is make the biggest container( html ) 100%. The html page is as big as the page itself. Next we set the body height, it can be bigger than the 100% of the html tag, but it should at least be as big, therefore we use min-height 100%.
We also make the body relative. Relative means you can move the block element around relative from its original position. We don't use that here though. Because relative has a second use. Any absolute element is either absolute to the root (html) or to the first relative parent/grandparent. That's what we want, we want the footer to be absolute, relative to the body, namely the bottom.
The last step is to set the footer to absolute and bottom:0, which moves it to the bottom of the first parent/grandparent that is relative ( body ofcourse ).
Now we still have one problem to fix, when we fill the complete page, the content goes beneath the footer. Why? Well, because the footer is no longer inside the "html flow", because it is absolute. So how do we fix this? We will add padding-bottom to the body. This makes sure the body is actually bigger than it's content.
While I found many similar answers, the only solution that I could find where the footer was always at the bottom and did not display over the existing data was the following:
footer {
position: relative;
clear: both;
}
I have the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer which I can't make sit at the bottom of the page.
I want the footer to
stick to the window bottom when the page is short and the screen is not filled, and
stay at the document end and move down as normal when there is more than a screenful of content (instead of overlapping the content).
The CSS is inherited and befuddles me. I can't seem to change it properly to put a minimum height on the content or make the footer go to the bottom.
Below are 4 different methods of mine:
In each example the texts are freely-editable to illustrate how the content would render in different scenarios.
1) Flexbox
body{ min-height: 100vh; margin:0; }
header{ min-height:50px; background:lightcyan; }
footer{ min-height:50px; background:PapayaWhip; }
/* The article fills all the space between header & footer */
body{ display:flex; flex-direction:column; }
article{ flex:1; }
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>
2) Grid
body{
min-height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
header{
min-height:50px;
background:lightcyan;
}
footer{
min-height:50px;
background:PapayaWhip;
}
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>
This method below uses a "trick" by placing an ::after pseudo-element on the body, and set it to have the exact height of the footer, so it will occupy the exact same space the footer does, so when the footer is absolute positioned over it, it would appear like the footer is really taking up space and eliminate the negative affects of it's absolute positioning (for example, going over the body's content)
3) position:absolute (no dynamic footer height)
body{ min-height:100vh; margin:0; position:relative; }
header{ min-height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }
/* Trick: */
body {
position: relative;
}
body::after {
content: '';
display: block;
height: 50px; /* Set same as footer's height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>
4) Table-layout
html{ height:100%; }
body { min-height:100%; margin:0; }
header {
height: 50px;
background: lightcyan;
}
article {
height: 1%;
}
footer {
height: 50px;
background: PapayaWhip;
}
/**** Trick: ****/
body {
display: table;
width: 100%;
}
body > footer {
display: table-row;
}
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>
A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.
Give the footer a negative margin-top:
footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;
}
A very simple approach which works great cross browser is this:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
A very simple flex solution that does not assume fixed heights or changing position of elements.
HTML
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
CSS
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
Browser Support
All major browsers, except IE11 and below.
Make sure to use Autoprefixer for appropriate prefixes.
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
/////////////////////////////////////////////
body,
html {
margin: 0;
padding: 0;
}
header,
main,
footer {
margin: 0;
display: block;
}
header,
footer {
min-height: 80px;
}
header {
background-color: #ccc;
}
main {
background-color: #f4f4f4;
}
footer {
background-color: orange;
}
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
I've used this to stick my footer to the bottom and it worked for me:
HTML
<body>
<div class="allButFooter">
<!-- Your page's content goes here, including header, nav, aside, everything -->
</div>
<footer>
<!-- Footer content -->
</footer>
</body>
That's the only modification you have to do in the HTML, add that div with the "allButFooter" class. I did it with all the pages, those that were so short, I knew the footer wouldn't stick to the bottom, and also pages long enough that I already knew I had to scroll. I did this, so I could see that it works ok in the case that a page's content is dynamic.
CSS
.allButFooter {
min-height: calc(100vh - 40px);
}
The "allButFooter" class has a min-height value that depends on the viewport's height (100vh means 100% of the viewport height) and the footer's height, that I already knew was 40px.
That's all I did, and it worked perfectly for me. I haven't tried it in every browser, just Firefox, Chrome and Edge, and the results were as I wanted. The footer sticks to the bottom, and you don't have to mess with z-index, position, or any other properties. The position of every element in my document was the default position, I didn't change it to absolute or fixed or anything.
Working with responsive design
Here's something I would like to clear out. This solution, with the same Footer that was 40px high didn't work as I expected when I was working in a responsive design using Twitter-Bootstrap. I had to modify the value I was substracting in the function:
.allButFooter {
min-height: calc(100vh - 95px);
}
This is probably because Twitter-Bootstrap comes with its own margins and paddings, so that's why I had to adjust that value.
From IE7 onwards you can simply use
#footer {
position:fixed;
bottom:0;
}
See caniuse for support.
Keep the footer at the bottom by using Flexbox
<div style="min-height:100vh; display:flex; flex-direction:column;
justify-content:space-between;">
<div> <!-- Wrapper (Without footer) -->
<header>
I am a header.
</header>
<article>
I am an article!
</article>
</div> <!-- End: Wrapper (Without footer) -->
<footer>
I am a footer.
</footer>
</div>
Note
Make sure that you are wrapping everything in a <div> or any other block-level element with the following CSS styles: min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; .
Make sure that you are wrapping everything but the footer element in a <div> or any other block-level element.
Make sure that you using <footer> or any other block-level element to wrap the footer.
Code Explanation
min-height: 100vh ensures that the body element will stretch to at least the full height of the screen
flex-direction: column keeps the behavior of normal document flow in terms of retaining stacked block elements (which assumes direct children of the body are all indeed block elements).
justify-content:space-between pushes the footer to the bottom of the screen.
Check out how to do the same (Keeping the footer at the bottom) by using Bootstrap 5 - Link
A simple solution that i use, works from IE8+
Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.
JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/
Css
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
Html
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
Yet, another really simple solution is this one:
html, body {
height: 100%;
width: 100%;
margin: 0;
display: table;
}
footer {
background-color: grey;
display: table-row;
height: 0;
}
jsFiddle
The trick is to use a display:table for the whole document and display:table-row with height:0 for the footer.
Since the footer is the only body child that has a display as table-row, it is rendered at the bottom of the page.
Do this
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>
You can also read about flex it is supported by all modern browsers
Update: I read about flex and tried it. It worked for me. Hope it does the same for you. Here is how I implemented.Here main is not the ID it is the div
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: block;
flex: 1 0 auto;
}
Here you can read more about flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Do keep in mind it is not supported by older versions of IE.
This is known as a sticky footer. A google search for it comes up with a lot of results. A CSS Sticky Footer is the one I've used successfully. But there are more.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
Source for this code
This is how I solved the same issue
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
footer {
margin-top:calc(5% + 60px);
}
This works fine
One thing to be wary of is mobile devices, since they implement the idea of the viewport in an 'unusual' way:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25
As such, using position: fixed; (as I've seen recommended in other places) usually isn't the way to go. Of course, it depends upon the exact behaviour you're after.
What I've used, and has worked well on desktop and mobile, is:
<body>
<div id="footer"></div>
</body>
with
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}
#footer {
position: absolute;
bottom: 0;
}
I just answered as similar question in here:
Position footer at bottom of page having fixed header
I'm pretty new at web development, and I know this has been answered already, but this is the easiest way I found to solve it and I think is somehow different. I wanted something flexible because the footer of my web app has a dynamic height, I ended up using FlexBox and a spacer.
Start by setting the height for your html and body
html, body {
height: 100%;
display: flex;
flex-direction: column;
margin: 0px;
}
I'm assuming a column behavior for our app, in the case you need to add a header, hero or any content vertically aligned.
Create the spacer class
.spacer {
flex: 1;
}
So later on your HTML could be something like
<html>
<body>
<header> Header </header>
Some content...
<div class='spacer'></div>
<footer> Footer </footer>
</body>
</html>
You can play with it here
https://codepen.io/anon/pen/xmGZQL
Works for me.
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
My jQuery method, this one puts the footer at the bottom of the page if the page content is less than the window height, or just puts the footer after the content otherwise:
Also, keeping the code in it's own enclosure before other code will reduce the time it takes to reposition the footer.
(function() {
$('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
I achieved that using CSS grid, basically I defined 3 rows:
Header
content
footer
And the used grid to define the sizes, the trick is to align the footer at the end of the row, like this:
CSS
body {
display: grid;
grid-template-rows: auto auto auto;
}
footer {
display: grid;
align-self: end; /* The trick */
}
HTML file
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header>
Header content
</header>
<h1>main body</h1>
<p>This is a paragraph.</p>
<footer>
<p>Hello there.</p>
</footer>
</body>
</html>
You can use more rows but remember to add the to the CSS, or wrap everything inside a div.
This guide here really helped me figure this out.
You need to use position: absolute; this is important, then bottom:0
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
ONE line solution using Bootstrap
Apart from all the CSS and jQuery solutions provided,
I have listed a solution using Bootstrap with a single class declaration on body tag: d-flex flex-column justify-content-between
This DOES NOT require knowing the height of the footer ahead of time.
This DOES NOT require setting position absolute.
This WORKS with dynamic divs that overflow on smaller screens.
html, body {
height: 100%;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body class="d-flex flex-column justify-content-between text-white text-center">
<header class="p-5 bg-dark">
<h1>Header</h1>
</header>
<main class="p-5 bg-primary">
<h1>Main</h1>
</main>
<footer class="p-5 bg-warning">
<h1>Footer</h1>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
I consider you can set the main content to viewport height, so if the content exceeds, the height of the main content will define the position of the footer
* {
margin: 0;
padding: 0;
width: 100%;
}
body {
display: flex;
flex-direction: column;
}
header {
height: 50px;
background: red;
}
main {
background: blue;
/* This is the most important part*/
height: 100vh;
}
footer{
background: black;
height: 50px;
bottom: 0;
}
<header></header>
<main></main>
<footer></footer>
I have myself been looking into this problem. I have seen quite a few solutions and each of them had issues, often involving some magic numbers.
So using best practices from various sources I came up with this solution:
http://jsfiddle.net/vfSM3/248/
The thing I wanted to achieve specifically here was to get the main content to scroll between footer and header inside green area.
Here is a simple CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 4em;
background-color: red;
position: relative;
z-index: 1;
}
.content {
background: white;
position: absolute;
top: 5em;
bottom: 5em;
overflow: auto;
}
.contentinner {
}
.container {
height: 100%;
margin: -4em 0 -2em 0;
background: green;
position: relative;
overflow: auto;
}
footer {
height: 2em;
position: relative;
z-index: 1;
background-color: yellow;
}
What I did
Html
<div>
<div class="register">
/* your content*/
</div>
<div class="footer" />
<div/>
CSS
.register {
min-height : calc(100vh - 10rem);
}
.footer {
height: 10rem;
}
Don't need to use position fixed and absolute. Just write the html in proper way.
You can do this
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
Position fixed with bottom, left, and right set to 0 works best for me:
.footer {
position: fixed;
background : #d1ccc0;
bottom : 0;
left : 0;
right : 0;
height : 50px;
}
Position absolute doesn't stick to the bottom, but fixed does.
Just customize the footer section
.footer
{
position: fixed;
bottom: 0;
width: 100%;
padding: 1rem;
text-align: center;
}
<div class="footer">
Footer is always bootom
</div>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
It's actually very simple. This solution doesn't require to know footer height.
<body>
<div class="app">
Website
</div>
<div class="footer">
Footer
</div>
</body>
.app {
min-height: 100vh;
}
In comparisson to other solutions, one does not need to add extra containers. Therefor this solution is a bit more elegant. Beneath the code example I'll explain why this works.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
html
{
height:100%;
}
body
{
min-height:100%;
padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
margin:0; /*see above comment*/
}
body
{
position:relative;
padding-bottom:60px; /* Same height as the footer. */
}
footer
{
position:absolute;
bottom:0px;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<header>header</header>
<footer>footer</footer>
</body>
</html>
So the first thing we do, is make the biggest container( html ) 100%. The html page is as big as the page itself. Next we set the body height, it can be bigger than the 100% of the html tag, but it should at least be as big, therefore we use min-height 100%.
We also make the body relative. Relative means you can move the block element around relative from its original position. We don't use that here though. Because relative has a second use. Any absolute element is either absolute to the root (html) or to the first relative parent/grandparent. That's what we want, we want the footer to be absolute, relative to the body, namely the bottom.
The last step is to set the footer to absolute and bottom:0, which moves it to the bottom of the first parent/grandparent that is relative ( body ofcourse ).
Now we still have one problem to fix, when we fill the complete page, the content goes beneath the footer. Why? Well, because the footer is no longer inside the "html flow", because it is absolute. So how do we fix this? We will add padding-bottom to the body. This makes sure the body is actually bigger than it's content.
While I found many similar answers, the only solution that I could find where the footer was always at the bottom and did not display over the existing data was the following:
footer {
position: relative;
clear: both;
}
This question already has answers here:
Footer below content, but not floating mid-air if not enough content
(6 answers)
Closed 7 years ago.
I have to set the footer on the bottom but in the way I'm using it's always at the bottom even if the page content is bigger than the screen.
If the content its bigger than the screen I would like to have to scroll in order to see the footer.
.fijo{
bottom: 0;
position: fixed;
width:100%;
}
You need to use a sticky footer.
HTML
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Easy one, just use the following CSS code
#footer {
position: absolute;
bottom: 10;
left: 0;
}
The ID of the footer should of course be "footer" in order for this to work, or rename it to whatever you like.
Hope this helps :)
Here is the solution
Demo
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ffff00;
padding:20px;
text-align:center;
}
#content {
padding-bottom:50px; /* Height of the footer element */
text-align:center;
}
#footer {
background:#00ffff;
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
text-align:center;
}
HTML:
<div id="wrapper">
<div id="header">Header is here</div>
<div id="content">Content is here</div>
<div id="footer">Footer is here</div>
</div>
If you are using HTML5 in combination with Twitter Bootstrap or any other template, or even pages built from scratch, you can also apply it directly on the footer element with no additional ID or class selectors required using the code #pzp provided above:
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
I'm trying to create a website on my own for my art portfolio and I ran across http://ryanfait.com/sticky-footer/. I'm having trouble adding an extra element for it.
I have the following HTML structure:
<html>
<head>
<link rel="stylesheet" href="style.css" ... />
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
<img src="image.png>
</div>
</body>
And the following style.css:
.wrapper {
position: relative;
width: 800px;
margin: 0 auto -50px;
}
.footer {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
background-color:#000000;
text-align:center;
}
.footer img {
position: relative;
width: 400px;
top: -238px;
margin: 0 auto;
}
.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 100%;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
}
with the layout.css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */}
.footer { height: 50px; /* .push must be the same height as .footer */}
.push {
height: -100px; /* .push must be the same height as .footer */
}
I set the image negative so that it will overlap the main content when the window is resized. Also, I would like a sticky bottom "border" right below the image. However, no matter how much I mess with the margins or heights, I cannot get rid of the negative space that the above code creates. Do you have any suggestions?
**I figured it out.
The sticky-footer tutorial makes a sticky footer that stops at the border of the main body. What I wanted was a sticky footer that was a top "layer" that will go over the main body AND have a border element on the bottom.
I should not have used the 'top:-238px'. Instead, I nested a class under footer in html and css.
<div class="footer">
<img src="Image.png" width="400" height="238" />
<div class="bottom-border">
<p>Copyright (c) 2008</p>
</div>
</div>
and
.footer img {
position: relative;
width: 400px;
margin: 0 auto;}
.bottom {
position: relative;
width: 100%;
height: 20px;
margin: 0 auto 0;
padding: 0;
text-align:center;
background-color: #000000;}
Then, per sticky-footer's instructions in the 'layout.css' comments, I kept the .wrapper, .footer, .push height's all the same.**
Bit late but I can answer it anyway :) The problem is occurring as even though your image is relatively placed above the footer it still occupies the same place in the page. You want to use position:absolute;.
Here it is working
I made the following changes:
.footer img {
position:absolute;
}
.footer p {
position: relative;
height:4em;
}
Using position:absolute; will place the element in the position of the last non-static (default) element and remove it from the 'flow of the page'. So in this case it places it at .footer and takes it out of the page so it doesn't take up any space anymore.
EDIT: Also I broke the centering by changing it to absolute as margin:0 auto; won't work on position:absolute; elements. Add these rules to fix that.
.footer img {
left:50%;
margin-left:-200px;
}
I have easiest solution for sticky footer. Please simple add height: 100% on body and html. Then wrapper display: table . For adding element you can add any content/element inside of .w1 element .
And its footer flexible too.
Here is the code
html{height:100%;}
body{
margin:0;
height:100%;
background: #ccc;
}
#wrapper{
width:100%;
height:100%;
display:table;
margin:0 auto;
}
#footer{
width:100%;
overflow:hidden; /*for FF on Windows 7*/
display:table-footer-group;
height:1%;
background: #333;
color: #fff;
}
<div id="wrapper"> <!-- table -->
<div class="w1">
<p>header and content of the page</p>
</div>
<div id="footer"> <!-- table-footer-group -->
<p>footer content</p>
</div>
</div>
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 8 years ago.
Can anyone explain how to align a footer div to the bottom of the page. From the examples I've seen, they all show how to make the div stay visible at the bottom, no matter where you've scrolled the page. Although I don't want it like that. I want it fixed at the bottom of the page, so it doesn't move. Appreciate the help!
UPDATE
My original answer is from a long time ago, and the links are broken; updating it so that it continues to be useful.
I'm including updated solutions inline, as well as a working examples on JSFiddle. Note: I'm relying on a CSS reset, though I'm not including those styles inline. Refer to normalize.css
Solution 1 - margin offset
https://jsfiddle.net/UnsungHero97/ur20fndv/2/
HTML
<div id="wrapper">
<div id="content">
<h1>Hello, World!</h1>
</div>
</div>
<footer id="footer">
<div id="footer-content">Sticky Footer</div>
</footer>
CSS
html, body {
margin: 0px;
padding: 0px;
min-height: 100%;
height: 100%;
}
#wrapper {
background-color: #e3f2fd;
min-height: 100%;
height: auto !important;
margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */
}
#wrapper:after {
content: "";
display: block;
height: 50px; /* the footer's total height */
}
#content {
height: 100%;
}
#footer {
height: 50px; /* the footer's total height */
}
#footer-content {
background-color: #f3e5f5;
border: 1px solid #ab47bc;
height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
padding: 8px;
}
Solution 2 - flexbox
https://jsfiddle.net/UnsungHero97/oqom5e5m/3/
HTML
<div id="content">
<h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>
CSS
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
#content {
background-color: #e3f2fd;
flex: 1;
padding: 20px;
}
#footer {
background-color: #f3e5f5;
padding: 20px;
}
Here's some links with more detailed explanations and different approaches:
https://css-tricks.com/couple-takes-sticky-footer/
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
ORIGINAL ANSWER
Is this what you mean?
http://ryanfait.com/sticky-footer/
This method uses only 15 lines of CSS and hardly any HTML markup. Even better, it's completely valid CSS, and it works in all major browsers. Internet Explorer 5 and up, Firefox, Safari, Opera and more.
This footer will stay at the bottom of the page permanently. This means that if the content is more than the height of the browser window, you will need to scroll down to see the footer... but if the content is less than the height of the browser window, the footer will stick to the bottom of the browser window instead of floating up in the middle of the page.
Let me know if you need help with the implementation.
This will make the div fixed at the bottom of the page but in case the page is long it will only be visible when you scroll down.
<style type="text/css">
#footer {
position : absolute;
bottom : 0;
height : 40px;
margin-top : 40px;
}
</style>
<div id="footer">I am footer</div>
The height and margin-top should be the same so that the footer doesnt show over the content.
Your title and comments imply that you weren't looking for a sticky footer (stuck to the bottom of the window as content scrolls below it). I assume you were looking for a footer that would be forced to the bottom of the window if the content does not fill the window, and push down to the bottom of the content if the content exceeds the window boundary.
You can accomplish this with the following.
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
Source: How to keep footers at the bottom of the page
Use
<div style="position:fixed; bottom:0; height:auto; margin-top:40px;
width:100%; text-align:center">
I am footer
</div>
Footer will not go upwards
check this out, works on firefox and IE
<style>
html, body
{
height: 100%;
}
.content
{
min-height: 100%;
}
.footer
{
position: relative;
clear: both;
}
</style>
<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>
A simple solution that i use, works from IE8+
Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.
JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/
Css
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
Html
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
I am a newbie and these methods are not working for me. However, I tried a margin-top property in css and simply added the value of content pixels +5.
Example: my content layout had a height of 1000px so I put a margin-top value of 1005px in the footer css which gave me a 5px border and a footer that sits delightfully at the bottom of my site.
Probably an amateur way of doing it, but EFFECTIVE!!!