title: Place footer at the bottom of a web page in React app
body: <p>I am new in reactjs. I tried many solutions, but can't fix my footer to show at the bottom of the web page after displaying the web content. In this scenario, if web page has less content, footer is sitting right after end of the web content, instead of sitting at bottom. Moreover, I also tried with position:fixed, which practically shows the footer always stick at the bottom of the page, and sometime, some of the contents got hide back of the footer if web page is long.
  Can you guys please help me to get rid of this issue.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function App() {
    return (
      &lt;div className="App"&gt;
        &lt;Header&gt;&lt;/Header&gt;
        &lt;Routes&gt;
          &lt;Route path="/" element={&lt;Home&gt;&lt;/Home&gt;}&gt;&lt;/Route&gt;
          &lt;Route path="/home" element={&lt;Home&gt;&lt;/Home&gt;}&gt;&lt;/Route&gt;
          &lt;Route path="/blogs" element={&lt;Blogs&gt;&lt;/Blogs&gt;}&gt;&lt;/Route&gt;
          &lt;Route path="/login" element={&lt;Login&gt;&lt;/Login&gt;}&gt;&lt;/Route&gt;
          &lt;Route path="/register" element={&lt;Register&gt;&lt;/Register&gt;}&gt;&lt;/Route&gt;
          &lt;Route path="*" element={&lt;NotFound&gt;&lt;/NotFound&gt;}&gt;&lt;/Route&gt;
         
        &lt;Footer&gt;&lt;/Footer&gt;
      &lt;/div&gt;
    );
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.footer {
      background-color: #758283;
      color: white;
      position: relative;
  
      display: flex;
      justify-content: space-between;
      padding: 20px 40px;
  
      bottom: 0;
  }</code></pre>
  </div>
  </div>
  </p>