title: Have item always on bottom without overlapping other content
body: <p>I desire two things:</p>
  <ol>
  <li>I want a button which is always at the bottom of the screen. No matter how many content there is.</li>
  <li>The button should come after the content, without overlapping it.</li>
  </ol>
  <p>For 1), the following makes sense:</p>
  <pre><code>button: {
              position: &quot;fixed&quot;,
              bottom: 0
          }
  </code></pre>
  <p>But I do not know how to achieve 2 with this setup, any margin/padding will be ignored.
  Here are images showcasing what I mean:</p>
  <ol>
  <li>Button on the bottom, even if there is less than fullscreen content:</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/wVmJJm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wVmJJm.png" alt="Button on the bottom, even if there is less than fullscreen content" /></a></p>
  <p>And 2) Unwanted behaviour: Button floats over other content, instead of being placed below of it</p>
  <p>I just shrinked the browser window here, the same result would've happened if I had more &quot;cards&quot; on the fullscreen. I am quite certain that this is not a responsive issue, since I am using Material UI under the hood which comes with full responsiveness
  <a href="https://i.stack.imgur.com/RXY1rm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RXY1rm.png" alt="Unwanted behaviour: Button floats over other content, instead of being placed below of it" /></a></p>