From 42d6d827ebc003ffb1b343536b1d715a5dec20f3 Mon Sep 17 00:00:00 2001
From: Bereczki Sandor <bsandor453@gmail.com>
Date: Sun, 20 Jan 2019 02:08:23 +0100
Subject: [PATCH] Fix footer

Footer should be always fixed to the bottom, though you may need to use margins at the bottom element.
---
 public/index.css             |  3 +++
 public/index.html            |  1 +
 src/components/App.js        | 14 ++++++++++----
 src/components/Footer.js     |  6 ++++--
 src/components/pages/News.js |  1 -
 5 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 public/index.css

diff --git a/public/index.css b/public/index.css
new file mode 100644
index 0000000..7cc411c
--- /dev/null
+++ b/public/index.css
@@ -0,0 +1,3 @@
+html, body, #root {
+  height: 100%;
+}
diff --git a/public/index.html b/public/index.html
index 05ba77a..c47259a 100644
--- a/public/index.html
+++ b/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.
diff --git a/src/components/App.js b/src/components/App.js
index 40766ce..395756a 100644
--- a/src/components/App.js
+++ b/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>
 );
 
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 6438449..8721007 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,12 +1,14 @@
 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;
diff --git a/src/components/pages/News.js b/src/components/pages/News.js
index d1d7bff..acaad62 100644
--- a/src/components/pages/News.js
+++ b/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'>
-- 
GitLab