Show footer always at the bottom

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/components/landing/landing-layout.tsx

@@ -1,14 +1,18 @@
 import React from 'react'
 import { Container } from 'react-bootstrap'
-import { HeaderBar } from './layout/navigation/header-bar/header-bar'
 import { Footer } from './layout/footer/footer'
+import { HeaderBar } from './layout/navigation/header-bar/header-bar'
 
 export const LandingLayout: React.FC = ({ children }) => {
   return (
-    <Container className="text-white text-center">
+    <Container className="text-white d-flex flex-column mvh-100">
       <HeaderBar/>
+      <div className={'d-flex flex-column justify-content-between flex-fill text-center'}>
+        <div>
           {children}
+        </div>
         <Footer/>
+      </div>
     </Container>
   )
 }

src/components/landing/pages/intro/intro.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
 import { CoverButtons } from './cover-buttons/cover-buttons'
@@ -9,7 +9,7 @@ const Intro: React.FC = () => {
   const { t } = useTranslation()
 
   return (
-    <div>
+    <Fragment>
       <h1 dir='auto'>
         <ForkAwesomeIcon icon="file-text"/> CodiMD
       </h1>
@@ -21,7 +21,7 @@ const Intro: React.FC = () => {
 
       <img alt={t('landing.intro.screenShotAltText')} src={screenshot} className="img-fluid mb-5"/>
       <FeatureLinks/>
-    </div>
+    </Fragment>
   )
 }
 

src/global-style/index.scss

@@ -27,3 +27,7 @@ body {
 .text-start {
   text-align: start;
 }
+
+.mvh-100 {
+  min-height: 100vh;
+}