sticky footer react code example

Example 1: sticky footer react

.footer{
  margin-top: 1rem;
  padding: 1rem;
  background-color: rgb(235, 195, 64);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

Example 2: React sticky header

// One way around it

// First off get react-sticky (npm/yarn etc..)
npm install react-sticky

// Then you could do something like...
import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
// ...
 
class App extends React.Component {
  render() {
    return (
      
        {/* Other elements can be in between `StickyContainer` and `Sticky`,
        but certain styles can break the positioning logic used. */}
        
          {({
            style,
 
            // the following are also available but unused in this example
            isSticky,
            wasSticky,
            distanceFromTop,
            distanceFromBottom,
            calculatedHeight
          }) => (
            

              {/* ... */}
            
          )}
        
        {/* ... */}
      
    );
  },
};

Example 3: how to make sticky footer with react router

#container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#main-content {
  flex: 1;
}