'Fixed div at the top and botton without hiding main content

I try to use a simple layout, with a 100% width top and bottom div. and between there should be the content:

|--------------------|
|     TOP            |
|--------------------|
|                    |
|     CONTENT        |
|                    |
|--------------------|
|     BOTTOM         |
|--------------------|

This is my Testcode:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
    <div class="container-fluid fixed-top" style="background-color:#ff7fff;">
      Content
    </div>
    <div class="container-sm" style="background-color:#ffff7f;">
      Content<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9
    </div>
    <div class="container-fluid fixed-bottom" style="background-color:#ff7fff;">
      Content
    </div>
    <script src="js/bootstrap.bundle.min.js"></script>
  </body>
</html>

But the problem is, that the BOTTOM is hiding some of the content. How can I fix it?

You can see in the screenshot, that the page is fully scrolled down and the last row that contains the '9' is hidden.

bootstrap-5

Solution 1:^[1]

The Solution I found is to place a dummy div at the end of content and give it a fixed height. I also give the same fixed height to the BOTTOM-div.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
    <div class="container-fluid fixed-top" style="background-color:#ff7fff;">
      TOP
    </div>
    <div class="container-sm" style="background-color:#ffff7f;">
      Content<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9
    </div>
    <div class="container-sm" style="height:100px; background-color:#7f7fff;">
      DUMMY
    </div>
    <div class="container-fluid fixed-bottom" style="height:100px; background-color:#ff7fff;">
      BOTTOM
    </div>
    <script src="js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	testo

'Fixed div at the top and botton without hiding main content

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]