sticky footer react

1.footer{
2  margin-top: 1rem;
3  padding: 1rem;
4  background-color: rgb(235, 195, 64);
5  position: fixed;
6  bottom: 0;
7  left: 0;
8  width: 100%;
9}

1// One way around it
2
3// First off get react-sticky (npm/yarn etc..)
4npm install react-sticky
5
6// Then you could do something like...
7import React from 'react';
8import { StickyContainer, Sticky } from 'react-sticky';
9// ...
10 
11class App extends React.Component {
12  render() {
13    return (
14      <StickyContainer>
15        {/* Other elements can be in between `StickyContainer` and `Sticky`,
16        but certain styles can break the positioning logic used. */}
17        <Sticky>
18          {({
19            style,
20 
21            // the following are also available but unused in this example
22            isSticky,
23            wasSticky,
24            distanceFromTop,
25            distanceFromBottom,
26            calculatedHeight
27          }) => (
28            <header style={style}>
29              {/* ... */}
30            </header>
31          )}
32        </Sticky>
33        {/* ... */}
34      </StickyContainer>
35    );
36  },
37};

1  <div id="container">
2    <Header loaded={loaded} />
3    <div id="main-content">
4      <Switch>
5        <Route
6          path="/about"
7          render={props => <About loaded={loaded} {...props} />}
8        />
9        <Route
10          exact
11          path="/"
12          render={props => <MainPage loaded={loaded} {...props} />}
13        />
14        <Redirect to="/" />
15      </Switch>
16    </div>
17    <Footer />
18  </div>

1#container {
2  display: flex;
3  min-height: 100vh;
4  flex-direction: column;
5}
6
7#main-content {
8  flex: 1;
9}