How to make a sticky footer that has padding from body with react-router?

[rahul1346]

Im trying to have a sticky footer but it is not sticky. Any ideas?

Here is my router handler:

var React  = require('react');
var Navbar = require('./Navbar.js');
var Footer = require('./Footer');
var Router = require('react-router');

var RouteHandler = Router.RouteHandler;

var App = React.createClass({
  render: function () {
    return (
      <div className="app-wrapper">
        <Navbar />
            <div>
                <RouteHandler />
            </div>
        <Footer />
      </div>
    );
  }
});

module.exports = App;

And this is the footer.js:

var React  = require('react');
var Router = require('react-router');
var Link = Router.Link;
var Navigation = require('react-router').Navigation;


var Footer = React.createClass({

  mixins: [Navigation],

  render: function () {

    return (
    <footer>
      <div id="credits">
        <div className="container text-center">
          <div className="row">
            <div className="col-md-5">
              <li>&copy; 2015</li>
              <li><Link to="contactus">Contact Us</Link></li>
              <li><Link to="about">About</Link></li>
            </div>
            <div className="col-md-5" id="social-networks">
              <a href="#"><i className="fa fa-2x fa-facebook-square"></i></a>
              <a href="#"><i className="fa fa-2x fa-twitter-square"></i></a>
              <a href="#"><i className="fa fa-2x fa-google-plus-square"></i></a>
              <a href="#"><i className="fa fa-2x fa-youtube-square"></i></a>
              <a href="#"><i className="fa fa-2x fa-vimeo-square"></i></a>
              <a href="#"><i className="fa fa-2x fa-pinterest-square"></i></a>
              <a href="#"><i className="fa fa-2x fa-linkedin-square"></i></a>
            </div>
          </div>
        </div>
      </div>
    </footer>
      );
    }
  });

module.exports = Footer;

Any idea the best way to do this?

[dozoisch]

I'm not sure this issue is related to react-router.

[rahul1346]

Why not?

[gaearon]

The router only matches the views to the your components and manages the address bar.
Visual styling (such as a sticky footer) is completely up to you and is out of scope of this project.

Here's what I found searching “sticky footer CSS”:
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

This might be helpful if you're fine with using Flexbox (in 2015, with Autoprefixer I'd say it's the best solution). If you'd rather avoid Flexbox, you might look for other solutions.

[albacoretuna]

For anyone ending up here via a search engine

Many sticky footer techniques like this one:
https://css-tricks.com/snippets/css/sticky-footer/

Need all parent element to have a height of 100%. In normal html pages, usually this is enough:

html, body {
height: 100%;
}

But using react, you get some more redundant parent elements eventually. Like the div that is needed, so that your app gets injected into it, or the mandatory wrappers that JSX requires. For your sticky footer to work, remember to add classes, and height for those as well.

[interglobalmedia]

No. Does not work. This Does:

In App.js:

import React, { Component } from 'react';
import {Header} from './components/Header';
import {Main} from './components/Main';
import {Footer} from './components/Footer';

class App extends Component {
	render() {
		return (
			<div className="App Site">
				<div className="Site-content">
					<div className="App-header">
						<Header />
					</div>
					<div className="main">
						<Main />
					</div>
				</div>
				<Footer />
			</div>
		);
	}
}

export default App;

And in _sticky-footer.css (I use POSTCSS):

:root {
    --space: 1.5em 0;
    --space: 2em 0;
}

.Site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.Site-content {
    flex: 1 0 auto;
    padding: var(--space) var(--space) 0;
    width: 100%;
}

.Site-content:after {
    content: '\00a0';
    display: block;
    margin-top: var(--space);
    height: 0;
    visibility: hidden;
}

So, instead of adding .Site className to <body> tag, you add it to the outermost <div className="App"></div> tag treating it as if it is the body tag. And as far as React is concerned, it is. Then you add the second div right below it adding the .Site-content className to i. You just had to make sure that everything is included in the flexbox styling EXCEPT the <Footer />, just as in traditional flexbox sticky footer styling. Philip Walton's flexbox sticky footer solution here: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/