Fix footer

Footer should be always fixed to the bottom, though you may need to use margins at the bottom element.

public/index.css

+html, body, #root {
+  height: 100%;
+}

public/index.html

@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="index.css">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/App.js

@@ -4,10 +4,16 @@ import Main from './Main';
 import Footer from './Footer';
 
 const App = () => (
-  <div>
-    <Header />
-    <Main />
-    <Footer />
+  <div style={{ minHeight: '100%', position: 'relative' }}>
+    <header id='header' >
+      <Header />
+    </header>
+    <main id='main'>
+      <Main />
+    </main>
+    <footer id='footer' style={{ position: 'absolute', width: '100%', bottom: '0' }}>
+      <Footer />
+    </footer>
   </div>
 );
 

src/components/Footer.js

 import React from 'react';
 import { Container, Segment } from 'semantic-ui-react';
 
+
 const Footer = () => (
-  <Segment inverted attached={'bottom'} vertical style={{clear: 'both'}} textAlign='center'>
+  <Segment inverted vertical textAlign='center' >
     <Container>
-      <p textalign='center'>Created by DevTeam &copy; 2017-2018.</p>
+      <p textalign='center' >Created by DevTeam &copy; 2017-2018.</p>
     </Container>
   </Segment>
+
 );
 
 export default Footer;

src/components/pages/News.js

@@ -72,7 +72,6 @@ class News extends Component {
   render() {
     return (
       <div>
-
         <Segment style={{ padding: '3em 3em' }} vertical>
           {/*  { this.props.user.is_superuser ? <AddNewsForm /> : ''} */}
           <Container text textAlign='center'>