Bootstrap4 - Layout with columns having 100% height and internal scroll

Question

How to achieve the following layout in pure bootstrap 4

  +-------------------------------------------------+
  |               Navbar fixed on top               |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Column A    |Column B                            |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+
  |                  Fixed footer                   |
  +-------------------------------------------------+

Please note that the Column A and B should take up the remaining space such that the full screen is covered with no scroll at the body level. But if their content is more, they should scroll within their own div independent of each other e.g if I scroll through Column A it shouldn't scroll column B and vice versa. Also how would I hide the scroll bars.

you can use traditional bootstrap grid layout, then add an extra class that removes the gutters etc. so you get the full witdth format that you wish, then set the hight to the viewport, then add overflow scroll to the css and voilá. The idea is that you let the bootstrap class stay what it is and simply make your own class that you also add to the element which contains these changes. — Martin, May 23 '20 at 07:47

score 0 · Answer 1 · answered May 23 '20 at 07:59

Here I made this for you, you can check out the code to see what's going on. Essentially It was a lot of setting your sections to a fixed position and seting the overflows to scroll.

.header {
  position: fixed;
  width: 100%;
  background-color: blue;
  top: 0;
}

.footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  background-color: red;
}

.content{
 
  margin: 25px;
  overflow: hidden;
  position: fixed;
}

.a {
  width: 25%;
  float: left;
  overflow: scroll;
  height: 100vh;
}

.b {
  width: 75%;
  float: left;
  overflow: scroll;
  height: 100vh;
}

<div class="header"> im the header</div>
<div class="content">
<div class="a">
column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A
</div>
<div class="b">
column b column b  column b  column b  column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b  olumn b column b  column b  column b  column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b 
</div>
</div>
<div class="footer"> I'm the footer</div>

Fareed Khan · Answer 2 · 2020-05-23T19:31:16.190

Probably you have to specify the height for your divupto 100vh so when content increases more than 100% height. It will apply built in class of bootstrap overflow-auto which apply scroll bar to the div having content greater than 100%.

#header {
  position: absolute;
  height: 50px;
  background-color: brown;
  width: 100%;
}

#body {
  position: absolute;
  top: 50px;
  bottom: 50px;
  background-color: yellow;
}

#footer {
  background-color: red;
  position: absolute;
  height: 50px;
  bottom: 0;
  width: 100%;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Hello, world!</title>
</head>

<body>
  </style>
  <div id="header">Header</div>
  <div id="body" style="overflow-x: hidden;">
    <div class="row">
      <div class="col-4 overflow-auto" style='height: 100vh;'>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Exercitationem reiciendis saepe fugiat repudiandae placeat delectus, fugit quaerat quam nobis. Cum eveniet
        officia impedit suscipit vel, amet excepturi numquam! Temporibus, blanditiis! Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Magni dolor minima exercitationem eligendi iste nesciunt suscipit voluptates quis
        modi, voluptatem, molestias, rem facere! Repellat, maiores. Aut quidem explicabo ut provident. Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eum nisi sed veritatis rem deserunt cumque quidem aliquam voluptatibus
        porro, eius aperiam esse suscipit numquam similique praesentium vel ipsam quaerat? Corrupti! Lorem, ipsum dolor
        sit amet consectetur adipisicing elit. Sunt dignissimos porro, et eaque ducimus blanditiis iste ipsam deleniti?
        Eveniet neque numquam natus rem molestias aliquam facilis perferendis enim magni maiores? Lorem ipsum dolor sit
        amet consectetur adipisicing elit. Eveniet accusamus et deleniti animodi, voluptatem, molestias, rem facere!
        Repellat, maiores. Aut quidem explicabo ut provident. Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Eum nisi sed veritatis rem deserunt cumque quidem aliquam voluptatibus porro, eius aperiam esse suscipit numquam
        similique praesentium vel ipsam quaerat? Corrupti! Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Sunt dignissimos porro, et eaque ducimus blanditiis iste ipsam deleniti? Eveniet neque numquam natus rem
        molestias aliquam facilis perferendis enim magni maiores? Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Eveniet accusamus et deleniti animodi, voluptatem, molestias, rem facere! Repellat, maiores. Aut quidem
        explicabo ut provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum nisi sed veritatis rem
        deserunt cumque quidem aliquam voluptatibus porro, eius aperiam esse suscipit numquam similique praesentium vel
        ipsam quaerat? Corrupti! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt dignissimos porro, et
        eaque ducimus blanditiis iste ipsam deleniti? Eveniet neque numquam natus rem molestias aliquam facilis
        perferendis enim magni maiores? Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet accusamus et
        deleniti animodi, voluptatem, molestias, rem facere! Repellat, maiores. Aut quidem explicabo ut provident. Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Eum nisi sed veritatis rem deserunt cumque quidem aliquam
        voluptatibus porro, eius aperiam esse suscipit numquam similique praesentium vel ipsam quaerat? Corrupti! Lorem,
        ipsum dolor sit amet consectetur adipisicing elit. Sunt dignissimos porro, et eaque ducimus blanditiis iste
        ipsam deleniti? Eveniet neque numquam natus rem molestias aliquam facilis perferendis enim magni maiores? Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Eveniet accusamus et deleniti animi architecto reprehenderit
        debitis iusto a, officia, ad officiis commodi, velit quas consectetur neque provident quod at molestiae. Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Rerum assumenda quisquam deleniti,
        officia cumque blanditiis molestiae non! Voluptas sed aut, adipisci aspernatur consectetur facilis molestiae
        nostrum, at illo ipsum voluptates!</div>
      <div class="col-8 overflow-auto" style='height: 100vh;'>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
        Odio sed dolores autem fuga nemo iste
        quidem, reprehenderit obcaecati fugiat soluta unde! Ut fuga nesciunt reprehenderit blanditiis in iste dicta
        doloreiam esse suscipit numquam similique praesentium vel ipsam quaerat? Corrupti! Lorem, ipsum dolor sit amet
        consectetur adipisicing elit. Sunt dignissimos porro, et eaque ducimus blanditiis iste ipsam deleniti? Eveniet
        neque numquam natus rem molestias aliquam facilis perferendis enim magni maiores? Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Eveniet accusamus et deleniti animodi, voluptatem, molestias, rem facere!
        Repellat, maiores. Aut quidem explicabo ut provident. Lorem ipsum dolor sit amet consecte nesciunt reprehenderit blanditiis in iste 
        corrupti temporibus.</div>
    </div>
  </div>
  </div>
  <div id="footer">Footer</div>

  
</body>

</html>

If you see it on the full page, there is a scroll on the body because of the header and the footer. — Haider, May 23 '20 at 18:19

Martin · Answer 3 · 2020-05-23T18:52:05.373

Like I mentioned in my comment. One way to achieve this is to use the standard Bootstrap grid layout to achieve the actual layout that you desire.

row no-gutters

col

cols make up in a maximum value of 12. You can read more about Bootstrap layouts here.

To get your desired heights of your containers, you can target the view height of the viewport by using the vh property in CSS - height: [number]vh;

For your scroll function, what you'll need to look at is the CSS property overflow. Here you can make use of either auto or scroll - overflow: auto;

Example of how it could look like.

HTML:

<nav class="navbar" id="mainNav">
    <div class="container">
        NAV
    </div>
</nav>
<div class="wrapper">
    <div class="row no-gutters">
        <div class="col-md-4 my-custom-class">
            Column A
            <br /><br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta tellus at augue congue consequat. Quisque in tristique nisi. Integer molestie odio at nisi auctor pharetra. Aliquam convallis sit amet sapien id pellentesque. Nam in dapibus mauris. Proin vitae ante sit amet tellus maximus sodales. Cras erat urna, commodo egestas nisi a, tincidunt interdum orci. Morbi scelerisque suscipit nunc. Cras laoreet lacus et velit egestas imperdiet. Quisque vehicula, nulla id ornare gravida, libero metus vehicula ante, nec ultrices orci dui non leo. Cras efficitur ac neque ut convallis. Aenean gravida lorem purus, ut vestibulum elit venenatis sed. Praesent urna nunc, interdum eget dolor nec, rhoncus malesuada urna. Pellentesque sed sodales odio. Fusce elementum convallis suscipit.

            Morbi porta euismod tellus, id tincidunt enim ultricies eget. Cras hendrerit elementum sapien, nec consequat lectus vulputate ac. Aenean eget porta justo. Quisque pharetra gravida nibh, id dictum lacus ultricies sit amet. Praesent tristique ut est non efficitur. Morbi viverra molestie lacus, quis tincidunt lorem posuere eu. Donec hendrerit lectus id porta tempor. Praesent vehicula metus sit amet tortor posuere, quis rutrum justo malesuada. In nec justo id sem pharetra tempus vel ut tellus. Donec felis massa, tempor ut risus in, semper rhoncus lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

            Donec consectetur est condimentum quam vehicula laoreet. Donec ac augue odio. Duis non lorem et enim fringilla lobortis. Duis fringilla vel eros ut malesuada. Aliquam dui est, malesuada nec velit ac, luctus iaculis velit. Suspendisse maximus dui ac libero sodales aliquet. Vivamus vitae commodo dolor. Cras posuere nibh nulla, vel sollicitudin tortor aliquet et. Nunc vel placerat orci. Suspendisse ultrices mollis mi eu varius. Phasellus et malesuada ipsum, vitae egestas libero.

            Morbi cursus faucibus accumsan. Proin pellentesque orci justo, vitae porttitor quam aliquam in. Mauris porta felis leo, suscipit condimentum quam pellentesque a. Nullam euismod eros et molestie ornare. Quisque a diam euismod, pretium mi quis, pretium elit. Etiam porta venenatis euismod. Vestibulum non nibh magna. Morbi accumsan ipsum nec massa mollis tempus. Phasellus ullamcorper dapibus felis quis auctor. Phasellus sit amet blandit sapien.

            Cras sit amet bibendum purus. Proin pellentesque facilisis blandit. Suspendisse egestas pharetra eros sed egestas. Duis consequat posuere ipsum id tempus. Donec aliquam ipsum dolor, vel luctus justo elementum quis. Cras posuere, lacus sit amet euismod ultricies, ante orci commodo mauris, at dignissim neque mi elementum odio. In luctus dictum est, a feugiat libero elementum nec. Vestibulum pretium sagittis nulla a volutpat. Donec sem magna, volutpat tempor mauris id, laoreet elementum dui. Nullam elementum ex in mauris vehicula malesuada. Donec porta tristique nibh id sodales. Nullam a augue ac nulla molestie sodales.
        </div>
        <div class="col-md-8 my-custom-class-2">
            Column B
            <br /><br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta tellus at augue congue consequat. Quisque in tristique nisi. Integer molestie odio at nisi auctor pharetra. Aliquam convallis sit amet sapien id pellentesque. Nam in dapibus mauris. Proin vitae ante sit amet tellus maximus sodales. Cras erat urna, commodo egestas nisi a, tincidunt interdum orci. Morbi scelerisque suscipit nunc. Cras laoreet lacus et velit egestas imperdiet. Quisque vehicula, nulla id ornare gravida, libero metus vehicula ante, nec ultrices orci dui non leo. Cras efficitur ac neque ut convallis. Aenean gravida lorem purus, ut vestibulum elit venenatis sed. Praesent urna nunc, interdum eget dolor nec, rhoncus malesuada urna. Pellentesque sed sodales odio. Fusce elementum convallis suscipit.

            Morbi porta euismod tellus, id tincidunt enim ultricies eget. Cras hendrerit elementum sapien, nec consequat lectus vulputate ac. Aenean eget porta justo. Quisque pharetra gravida nibh, id dictum lacus ultricies sit amet. Praesent tristique ut est non efficitur. Morbi viverra molestie lacus, quis tincidunt lorem posuere eu. Donec hendrerit lectus id porta tempor. Praesent vehicula metus sit amet tortor posuere, quis rutrum justo malesuada. In nec justo id sem pharetra tempus vel ut tellus. Donec felis massa, tempor ut risus in, semper rhoncus lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

            Donec consectetur est condimentum quam vehicula laoreet. Donec ac augue odio. Duis non lorem et enim fringilla lobortis. Duis fringilla vel eros ut malesuada. Aliquam dui est, malesuada nec velit ac, luctus iaculis velit. Suspendisse maximus dui ac libero sodales aliquet. Vivamus vitae commodo dolor. Cras posuere nibh nulla, vel sollicitudin tortor aliquet et. Nunc vel placerat orci. Suspendisse ultrices mollis mi eu varius. Phasellus et malesuada ipsum, vitae egestas libero.

            Morbi cursus faucibus accumsan. Proin pellentesque orci justo, vitae porttitor quam aliquam in. Mauris porta felis leo, suscipit condimentum quam pellentesque a. Nullam euismod eros et molestie ornare. Quisque a diam euismod, pretium mi quis, pretium elit. Etiam porta venenatis euismod. Vestibulum non nibh magna. Morbi accumsan ipsum nec massa mollis tempus. Phasellus ullamcorper dapibus felis quis auctor. Phasellus sit amet blandit sapien.

            Cras sit amet bibendum purus. Proin pellentesque facilisis blandit. Suspendisse egestas pharetra eros sed egestas. Duis consequat posuere ipsum id tempus. Donec aliquam ipsum dolor, vel luctus justo elementum quis. Cras posuere, lacus sit amet euismod ultricies, ante orci commodo mauris, at dignissim neque mi elementum odio. In luctus dictum est, a feugiat libero elementum nec. Vestibulum pretium sagittis nulla a volutpat. Donec sem magna, volutpat tempor mauris id, laoreet elementum dui. Nullam elementum ex in mauris vehicula malesuada. Donec porta tristique nibh id sodales. Nullam a augue ac nulla molestie sodales.
        </div>
    </div>
</div>
<div class="row no-gutters">
    <div class="col-md-12 custom-footer">
        FOOTER
    </div>
</div>

CSS:

/*======================================
//--//-->   STYLES CUSTOM
======================================*/

/* write your custom CSS here. */

.my-custom-class{
    background-color: blue;
    height: 75vh;
    color: white;
    overflow: auto;
}
.my-custom-class-2{
    background-color: red;
    height: 75vh;
    color: white;
    overflow: auto;
}

#mainNav{
    background-color: purple !important;
    color: white;
    height: 10vh;
}

.custom-footer{
    background-color: green;
    height: 15vh;
    color: white;
    text-align: center;
}

Runable code snippet:

.my-custom-class{
 background-color: blue;
 height: 75vh;
 color: white;
 overflow: auto;
}
.my-custom-class-2{
 background-color: red;
 height: 75vh;
 color: white;
 overflow: auto;
}

#mainNav{
 background-color: purple !important;
 color: white;
 height: 10vh;
  padding-bottom: 8%;
}

.custom-footer{
 background-color: green;
 height: 15vh;
 color: white;
 text-align: center;
  padding: 5%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar" id="mainNav">
 <div class="container">
  NAV
 </div>
</nav>
<div class="wrapper">
 <div class="row no-gutters">
  <div class="col-4 my-custom-class">
   Column A
   <br /><br />
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta tellus at augue congue consequat. Quisque in tristique nisi. Integer molestie odio at nisi auctor pharetra. Aliquam convallis sit amet sapien id pellentesque. Nam in dapibus mauris. Proin vitae ante sit amet tellus maximus sodales. Cras erat urna, commodo egestas nisi a, tincidunt interdum orci. Morbi scelerisque suscipit nunc. Cras laoreet lacus et velit egestas imperdiet. Quisque vehicula, nulla id ornare gravida, libero metus vehicula ante, nec ultrices orci dui non leo. Cras efficitur ac neque ut convallis. Aenean gravida lorem purus, ut vestibulum elit venenatis sed. Praesent urna nunc, interdum eget dolor nec, rhoncus malesuada urna. Pellentesque sed sodales odio. Fusce elementum convallis suscipit.

   Morbi porta euismod tellus, id tincidunt enim ultricies eget. Cras hendrerit elementum sapien, nec consequat lectus vulputate ac. Aenean eget porta justo. Quisque pharetra gravida nibh, id dictum lacus ultricies sit amet. Praesent tristique ut est non efficitur. Morbi viverra molestie lacus, quis tincidunt lorem posuere eu. Donec hendrerit lectus id porta tempor. Praesent vehicula metus sit amet tortor posuere, quis rutrum justo malesuada. In nec justo id sem pharetra tempus vel ut tellus. Donec felis massa, tempor ut risus in, semper rhoncus lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

   Donec consectetur est condimentum quam vehicula laoreet. Donec ac augue odio. Duis non lorem et enim fringilla lobortis. Duis fringilla vel eros ut malesuada. Aliquam dui est, malesuada nec velit ac, luctus iaculis velit. Suspendisse maximus dui ac libero sodales aliquet. Vivamus vitae commodo dolor. Cras posuere nibh nulla, vel sollicitudin tortor aliquet et. Nunc vel placerat orci. Suspendisse ultrices mollis mi eu varius. Phasellus et malesuada ipsum, vitae egestas libero.

   Morbi cursus faucibus accumsan. Proin pellentesque orci justo, vitae porttitor quam aliquam in. Mauris porta felis leo, suscipit condimentum quam pellentesque a. Nullam euismod eros et molestie ornare. Quisque a diam euismod, pretium mi quis, pretium elit. Etiam porta venenatis euismod. Vestibulum non nibh magna. Morbi accumsan ipsum nec massa mollis tempus. Phasellus ullamcorper dapibus felis quis auctor. Phasellus sit amet blandit sapien.

   Cras sit amet bibendum purus. Proin pellentesque facilisis blandit. Suspendisse egestas pharetra eros sed egestas. Duis consequat posuere ipsum id tempus. Donec aliquam ipsum dolor, vel luctus justo elementum quis. Cras posuere, lacus sit amet euismod ultricies, ante orci commodo mauris, at dignissim neque mi elementum odio. In luctus dictum est, a feugiat libero elementum nec. Vestibulum pretium sagittis nulla a volutpat. Donec sem magna, volutpat tempor mauris id, laoreet elementum dui. Nullam elementum ex in mauris vehicula malesuada. Donec porta tristique nibh id sodales. Nullam a augue ac nulla molestie sodales.
  </div>
  <div class="col-8 my-custom-class-2">
   Column B
   <br /><br />
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta tellus at augue congue consequat. Quisque in tristique nisi. Integer molestie odio at nisi auctor pharetra. Aliquam convallis sit amet sapien id pellentesque. Nam in dapibus mauris. Proin vitae ante sit amet tellus maximus sodales. Cras erat urna, commodo egestas nisi a, tincidunt interdum orci. Morbi scelerisque suscipit nunc. Cras laoreet lacus et velit egestas imperdiet. Quisque vehicula, nulla id ornare gravida, libero metus vehicula ante, nec ultrices orci dui non leo. Cras efficitur ac neque ut convallis. Aenean gravida lorem purus, ut vestibulum elit venenatis sed. Praesent urna nunc, interdum eget dolor nec, rhoncus malesuada urna. Pellentesque sed sodales odio. Fusce elementum convallis suscipit.

   Morbi porta euismod tellus, id tincidunt enim ultricies eget. Cras hendrerit elementum sapien, nec consequat lectus vulputate ac. Aenean eget porta justo. Quisque pharetra gravida nibh, id dictum lacus ultricies sit amet. Praesent tristique ut est non efficitur. Morbi viverra molestie lacus, quis tincidunt lorem posuere eu. Donec hendrerit lectus id porta tempor. Praesent vehicula metus sit amet tortor posuere, quis rutrum justo malesuada. In nec justo id sem pharetra tempus vel ut tellus. Donec felis massa, tempor ut risus in, semper rhoncus lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

   Donec consectetur est condimentum quam vehicula laoreet. Donec ac augue odio. Duis non lorem et enim fringilla lobortis. Duis fringilla vel eros ut malesuada. Aliquam dui est, malesuada nec velit ac, luctus iaculis velit. Suspendisse maximus dui ac libero sodales aliquet. Vivamus vitae commodo dolor. Cras posuere nibh nulla, vel sollicitudin tortor aliquet et. Nunc vel placerat orci. Suspendisse ultrices mollis mi eu varius. Phasellus et malesuada ipsum, vitae egestas libero.

   Morbi cursus faucibus accumsan. Proin pellentesque orci justo, vitae porttitor quam aliquam in. Mauris porta felis leo, suscipit condimentum quam pellentesque a. Nullam euismod eros et molestie ornare. Quisque a diam euismod, pretium mi quis, pretium elit. Etiam porta venenatis euismod. Vestibulum non nibh magna. Morbi accumsan ipsum nec massa mollis tempus. Phasellus ullamcorper dapibus felis quis auctor. Phasellus sit amet blandit sapien.

   Cras sit amet bibendum purus. Proin pellentesque facilisis blandit. Suspendisse egestas pharetra eros sed egestas. Duis consequat posuere ipsum id tempus. Donec aliquam ipsum dolor, vel luctus justo elementum quis. Cras posuere, lacus sit amet euismod ultricies, ante orci commodo mauris, at dignissim neque mi elementum odio. In luctus dictum est, a feugiat libero elementum nec. Vestibulum pretium sagittis nulla a volutpat. Donec sem magna, volutpat tempor mauris id, laoreet elementum dui. Nullam elementum ex in mauris vehicula malesuada. Donec porta tristique nibh id sodales. Nullam a augue ac nulla molestie sodales.
  </div>
 </div>
</div>
<div class="row no-gutters">
 <div class="col-md-12 custom-footer">
  FOOTER
 </div>
</div>

Check this link to see how it looks in an actual browser environment.

Screenshot of how it will look like:

If you see it on the full page, there is a scroll on the body because of the header and the footer. — Haider, May 23 '20 at 18:20
The snippet will behave differently because the space is much smaller. It does not actually engage as a "viewport". Trust me when I say that the scroll bar on very far right will not be there in actuality when you implement this solution. The vh property makes up a total of 100, which means it will never ever exceed the height of the display port of a given device. The only scroll option will forever only be on the the 2 containers (A & B) that has the overflow property set. — Martin, May 23 '20 at 18:37
I provided a screenshot with how it will actually look like on a screen, outside of the code snippet example. Hopefully you'll understand how the solution works. — Martin, May 23 '20 at 18:53

Bootstrap4 - Layout with columns having 100% height and internal scroll

3 Answers3