{"action":"created","issue":{"url":"https://api.github.com/repos/rackt/react-router/issues/1523","labels_url":"https://api.github.com/repos/rackt/react-router/issues/1523/labels{/name}","comments_url":"https://api.github.com/repos/rackt/react-router/issues/1523/comments","events_url":"https://api.github.com/repos/rackt/react-router/issues/1523/events","html_url":"https://github.com/rackt/react-router/issues/1523","id":94427761,"number":1523,"title":"How to make a sticky footer that has padding from body with react-router?","user":{"login":"rahul1346","id":9812910,"avatar_url":"https://avatars.githubusercontent.com/u/9812910?v=3","gravatar_id":"","url":"https://api.github.com/users/rahul1346","html_url":"https://github.com/rahul1346","followers_url":"https://api.github.com/users/rahul1346/followers","following_url":"https://api.github.com/users/rahul1346/following{/other_user}","gists_url":"https://api.github.com/users/rahul1346/gists{/gist_id}","starred_url":"https://api.github.com/users/rahul1346/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rahul1346/subscriptions","organizations_url":"https://api.github.com/users/rahul1346/orgs","repos_url":"https://api.github.com/users/rahul1346/repos","events_url":"https://api.github.com/users/rahul1346/events{/privacy}","received_events_url":"https://api.github.com/users/rahul1346/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-07-11T02:39:55Z","updated_at":"2015-07-14T00:32:34Z","closed_at":"2015-07-14T00:32:34Z","body":"Im trying to have a sticky footer but it is not sticky. Any ideas?\r\n\r\nHere is my router handler:\r\n\r\n```\r\nvar React  = require('react');\r\nvar Navbar = require('./Navbar.js');\r\nvar Footer = require('./Footer');\r\nvar Router = require('react-router');\r\n\r\nvar RouteHandler = Router.RouteHandler;\r\n\r\nvar App = React.createClass({\r\n  render: function () {\r\n    return (\r\n      <div className=\"app-wrapper\">\r\n        <Navbar />\r\n        \t<div>\r\n        \t\t<RouteHandler />\r\n        \t</div>\r\n        <Footer />\r\n      </div>\r\n    );\r\n  }\r\n});\r\n\r\nmodule.exports = App;\r\n```\r\n\r\nAnd this is the footer.js:\r\n\r\n```\r\nvar React  = require('react');\r\nvar Router = require('react-router');\r\nvar Link = Router.Link;\r\nvar Navigation = require('react-router').Navigation;\r\n\r\n\r\nvar Footer = React.createClass({\r\n\r\n  mixins: [Navigation],\r\n\r\n  render: function () {\r\n  \r\n    return (\r\n    <footer>\r\n      <div id=\"credits\">\r\n        <div className=\"container text-center\">\r\n          <div className=\"row\">\r\n            <div className=\"col-md-5\">\r\n              <li>&copy; 2015</li>\r\n              <li><Link to=\"contactus\">Contact Us</Link></li>\r\n              <li><Link to=\"about\">About</Link></li>\r\n            </div>\r\n            <div className=\"col-md-5\" id=\"social-networks\">\r\n              <a href=\"#\"><i className=\"fa fa-2x fa-facebook-square\"></i></a>\r\n              <a href=\"#\"><i className=\"fa fa-2x fa-twitter-square\"></i></a>\r\n              <a href=\"#\"><i className=\"fa fa-2x fa-google-plus-square\"></i></a>\r\n              <a href=\"#\"><i className=\"fa fa-2x fa-youtube-square\"></i></a>\r\n              <a href=\"#\"><i className=\"fa fa-2x fa-vimeo-square\"></i></a>\r\n              <a href=\"#\"><i className=\"fa fa-2x fa-pinterest-square\"></i></a>\r\n              <a href=\"#\"><i className=\"fa fa-2x fa-linkedin-square\"></i></a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </footer>\r\n      );\r\n    }\r\n  });\r\n\r\nmodule.exports = Footer;\r\n```\r\n\r\nAny idea the best way to do this?"},"comment":{"url":"https://api.github.com/repos/rackt/react-router/issues/comments/121098607","html_url":"https://github.com/rackt/react-router/issues/1523#issuecomment-121098607","issue_url":"https://api.github.com/repos/rackt/react-router/issues/1523","id":121098607,"user":{"login":"gaearon","id":810438,"avatar_url":"https://avatars.githubusercontent.com/u/810438?v=3","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"created_at":"2015-07-14T00:32:34Z","updated_at":"2015-07-14T00:32:34Z","body":"The router only matches the views to the your components and manages the address bar.\r\nVisual styling (such as a sticky footer) is completely up to you and is out of scope of this project.\r\n\r\nHere's what I found searching “sticky footer CSS”:\r\nhttp://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/\r\n\r\nThis 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."}}