Bootstrap container overflowing into footer - html

Question

I am building a page based on bootstrap5, yet I am having a problem in the positioning of the footer and the main content container.
The page was working fine until I added the footer:
before footer picture:
after footer picture:
I am providing a simplified code as a snippet here (all mages and some styles are broken, but notice the overflow at the bottom of the page):
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');
:root {
--top-header-top-position: 0rem;
--header-height: 3.5rem;
--nav-width: 68px;
--chat-width: 100px;
--primary-color: var(--bs-primary);
--secondary-color: var(--bs-secondary);
--field-gray: var(--bs-field-grey);
--field-grey-transparency: var(--bs-field-grey-transparency);
--white-color: var(--bs-white);
--body-font: 'Arimo', 'Montserrat', sans-serif;
--normal-font-size: 1rem;
--z-fixed: 51;
--z-lnavbar: 50;
--z-chat: 50;
--z-topbar: 51;
}
*,
::before,
::after {
box-sizing: border-box
}
.modal-backdrop {
z-index: 100000 !important;
}
.modal {
z-index: 100001 !important;
}
.top-header {
width: 100%;
height: var(--top-header-top-position);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--secondary-color);
z-index: var(--z-topbar);
transition: .5s;
text-align: center !important;
}
.header {
width: 100%;
height: var(--header-height);
position: fixed;
top: var(--top-header-top-position);
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--primary-color);
z-index: var(--z-fixed);
transition: .5s
}
.main-container-page {
padding-top: calc(var(--header-height) + var(--top-header-top-position) + 5rem);
z-index: 5000;
}
.header_toggle {
color: var(--primary-color);
font-size: 1.5rem;
cursor: pointer;
}
.header_img {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden
}
.header_img img {
width: 40px
}
#account-icon:hover {
color: var(--white-color);
}
.l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--primary-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-lnavbar);
}
.r-navbar {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100vh;
background-color: var(--primary-color);
padding: 1rem 0 0 1rem;
transition: .5s;
z-index: 5000;
padding: 1rem 0 0 1rem;
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
margin-top: 5rem;
}
.nav_logo,
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 1.5rem 2rem;
text-decoration: none;
}
.nav_link {
position: relative;
color: var(--white-color);
margin-bottom: 0rem;
transition: .3s
}
.nav_logo {
margin-bottom: 3rem
}
.nav_logo-icon {
font-size: 1.25rem;
color: var(--white-color)
}
.nav_logo-name {
color: var(--white-color);
font-weight: 700
}
.nav_link:hover {
color: var(--secondary-color) !important;
}
.nav_icon {
margin-left: -1rem;
font-size: 1.2rem;
}
.nav_name {
margin-left: -0.5rem;
font-size: 1rem;
}
.secondary-bs-color {
color: var(--bs-secondary)
}
.white-bs-color {
color: var(--white-color)
}
.show-left-nav {
left: 0;
width: calc(var(--nav-width) + 156px);
}
.show-right-nav {
width: 100%;
}
.body-chat-pd {
padding-right: calc(var(--chat-width) + 1rem);
}
.chat-font {
font-size: small;
}
.time-span-chat {
font-size: smaller;
color: var(--white-color);
}
#chatContainer {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
#chatContainer::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
.active {
font-weight: bold;
color: var(--secondary-color);
}
.active::before {
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--secondary-color)
}
.height-100 {
height: 100vh
}
.float-icon-chat {
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: var(--secondary-color);
color: var(--white-color);
border-radius: 50px;
text-align: center;
vertical-align: middle;
z-index: 100;
}
.coin-dropdown-item {
color: var(--white-color);
}
.coin-dropdown-item:hover {
color: var(--secondary-color);
background-color: var(--field-grey-transparency);
font-weight: bold;
}
#media screen and (min-width: 768px) {
.header {
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 1.5rem;
}
.header_img {
width: 40px;
height: 40px
}
.header_img img {
width: 45px
}
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.r-navbar {
right: 0;
padding: 1rem 0 0 1rem;
width: 0;
}
.show-left-nav {
width: calc(var(--nav-width) + 188px)
}
.body-menu-pd {
padding-left: calc(var(--chat-width) + 188px)
}
.show-right-nav {
width: calc(var(--chat-width) + 188px)
}
.body-chat-pd {
padding-right: calc(var(--chat-width) + 192px)
}
}
/* Media queries for conditional borders on games */
.game-col {
border-left: none;
}
.game-block {
border-bottom: none;
}
.game-top {
border-top: 1px solid var(--white-color);
}
#media (min-width: 576px) {
.game-col {
border-left: 1px solid var(--white-color);
}
.game-block {
border-bottom: 1px solid var(--white-color);
}
.game-top {
border-top: none;
}
}
/* crash game */
.crash-canvas {
height: 90%;
width: 100%;
max-width: 750px;
border-radius: 7px;
background-color: #0f1923;
margin: 0rem auto 2rem auto;
}
/* betting menu */
.bet-menu-buttons {
border-radius: 0.8rem;
width: 55px;
height: 50px;
font-size: 1.0rem;
color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
background-color: #262833;
color: #fff;
}
.crash-result {
border-radius: 0.8rem;
width: 40px;
height: 35px;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
background-color: #262833;
color: #fff;
}
.bettor-table-item {
border-bottom: 1px solid var(--white-color);
}
.bet-box1 {
border-left: 0.5px solid var(--field-grey-transparency);
border-top: 0.5px solid var(--field-grey-transparency);
border-right: 0.0px solid var(--field-grey-transparency);
border-bottom: 0.5px solid var(--field-grey-transparency);
}
.bet-box2 {
border-left: 0.0px solid var(--field-grey-transparency);
border-top: 0.5px solid var(--field-grey-transparency);
border-right: 0.0px solid var(--field-grey-transparency);
border-bottom: 0.5px solid var(--field-grey-transparency);
}
.bet-box3 {
border-left: 0.5px solid var(--field-grey-transparency);
border-top: 0.5px solid var(--field-grey-transparency);
border-right: 0.5px solid var(--field-grey-transparency);
border-bottom: 0.5px solid var(--field-grey-transparency);
}
.bet-box3:focus {
border-left: 0.5px solid var(--field-grey-transparency);
border-top: 0.5px solid var(--field-grey-transparency);
border-right: 0.5px solid var(--field-grey-transparency);
border-bottom: 0.5px solid var(--field-grey-transparency);
}
/* pre-footer */
.pre-footer {
height: 700px;
}
#media (min-width: 576px) {
.pre-footer {
height: 200px;
}
.footer-padding {
padding-left: var(--nav-width);
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--Container Main start-->
<div class="height-100 main-container-page">
<div class="container h-100">
<div class="row gx-0">
<div class="col-12 col-sm-5 order-sm-1 order-2 bg-transparent text-center game-top pt-5 pb-5 ps-5 pe-5 d-flex flex-column justify-content-evenly">
<div class="input-group mb-3 pb-3">
<span class="bet-box1 bg-primary text-white fw-bold input-group-text">Amount</span>
<span class="bet-box2 bg-primary text-white fw-bold input-group-text">TC</span>
<input type="text" class="bet-box3 bg-primary text-white form-control" placeholder="select value here" aria-label="Dollar amount (with dot and two decimal places)">
</div>
<div class="d-flex justify-content-between mb-3 pb-3">
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
2x
</div>
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
10x
</div>
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
1/2
</div>
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
+5
</div>
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
+10
</div>
</div>
<div class="d-block flex-column justify-content-center align-items-start mb-3 pb-3">
<span class="text-white fw-bold">
Select your side
</span>
</div>
<div class="d-block justify-content-arround h-100 w-100 mb-3 pb-3">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2">
</div>
<div class="d-flex flex-column mb-3 pb-3">
<button class="btn btn-secondary fw-bold border border-secondary rounded-pill">Bet</button>
</div>
<div class="d-flex justify-content-between pt-3">
<div class="d-block ps-3">
<i class="fas fa-expand fa-2x text-white"></i>
</div>
<div class="d-flex pe-3">
<div class="d-block">
<i class="fas fa-history fa-2x text-white"></i>
</div>
<div class="d-block ps-3">
<i class="fas fa-volume-mute fa-2x text-white"></i>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-7 order-sm-2 order-1 bg-transparent text-center game-col pb-5">
<div class="d-block h-80 game-block pt-4 ps-4 pe-4">
<div class="d-block h-3 ps-5 pt-3 pb-5">
<div class="d-flex bg-transparent w-92 position-relative" style="height: 22px;">
<span class="position-absolute w-100 start-0 text-white fw-bold">Girando em 00:20</span>
<div id="time-bar" class="d-flex border border-0 border-primary rounded-pill bg-secondary ps-1 pe-1 pt-1 pb-1" style="height: 22px; width: 5%;"></div>
</div>
</div>
<div class="d-flex">
<div class="coin" id="coin" data-spin="tails">
<div class="coin__front"></div>
<div class="coin__edge">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="coin__back"></div>
<div class="coin__shadow"></div>
</div>
</div>
</div>
<div class="d-flex flex-column h-35 game-top ps-3 pt-3 pb-5">
<div class="d-flex text-white fw-bold ms-1 mb-2">
Last runs:
</div>
<div class="d-flex justify-content-start">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2" style="min-width: 0;">
</div>
</div>
</div>
</div>
<!-- Row for displaying bets -->
<div class="row mt-5 pb-5 mb-5 gx-0">
<div class="col-12 col-sm-5 bg-primary mt-5">
<div class="container pt-3 pb-3 ps-3 pe-3">
<div class="row gx-0 border-bottom border-white border-2 pb-4">
<div class="col-4">
<img class="mx-auto d-block w-50" src="./img/coin1.png" alt="heads">
</div>
<div class="col-2"></div>
<div class="col-6 align-self-center">
<div class="text-white" style="font-size: xx-large;"> Win 1.9x</div>
</div>
</div>
<div class="row gx-0">
<div class="col-12 mt-3">
<div class="d-flex justify-content-between">
<div class="d-block">
<span class="text-white">Total bets</span>
</div>
<div class="d-block">
<div class="text-white" style="font-size: larger;"><span class="fw-bold">0 TC</span></div>
</div>
</div>
</div>
</div>
<div class="row gx-0 bg-secondary mt-3">
<div class="col-8 text-left text-white ps-3">User</div>
<div class="col-4 text-center text-white">Bet</div>
</div>
<div class="row gx-0 pt-2 pb-2 ">
<div class="col-8 text-left text-white ps-3">Elon Musk</div>
<div class="col-4 text-center text-white">270 TC</div>
</div>
<div class="row gx-0 pt-2 pb-2 ">
<div class="col-8 text-left text-white ps-3">Tony Ramos</div>
<div class="col-4 text-center text-white">135 TC</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
<div class="col-12 col-sm-5 bg-primary bg-opacity-50 mt-5">
<div class="container pt-3 pb-3 ps-3 pe-3">
<div class="row gx-0 border-bottom border-white border-2 pb-4">
<div class="col-4">
<img class="mx-auto d-block w-50" src="./img/coin2.png" alt="heads">
</div>
<div class="col-2"></div>
<div class="col-6 align-self-center">
<div class="text-white" style="font-size: xx-large;"> Win 1.9x</div>
</div>
</div>
<div class="row gx-0">
<div class="col-12 mt-3">
<div class="d-flex justify-content-between">
<div class="d-block">
<span class="text-white">Total bets</span>
</div>
<div class="d-block">
<div class="text-white" style="font-size: larger;"><span class="fw-bold">0 TC</span></div>
</div>
</div>
</div>
</div>
<div class="row gx-0 bg-secondary mt-3">
<div class="col-8 text-left text-white ps-3">User</div>
<div class="col-4 text-center text-white">Bet</div>
</div>
<div class="row gx-0 pt-2 pb-2 ">
<div class="col-8 text-left text-white ps-3">Elon Musk</div>
<div class="col-4 text-center text-white">270 TC</div>
</div>
<div class="row gx-0 pt-2 pb-2 ">
<div class="col-8 text-left text-white ps-3">Tony Ramos</div>
<div class="col-4 text-center text-white">135 TC</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Container Main end-->
<a class="position-fixed bottom-5 end-5 float-icon-chat" id="chatButton" role="button">
<span class="position-absolute top-15 start-20"><i class="far fa-comment-dots" style="font-size: 40px;"></i></span>
</a>
<div class="pre-footer mt-5 pt-5 mb-5 pb-5"></div>
<footer class="text-center text-lg-start bg-primary text-muted pt-5 mt-5 w-100">
<div class="container text-center text-md-start mt-5">
<div class="row mt-3">
<div class="col-6 mx-auto mt-5 mb-5">
<div class="d-block justify-content-center">
<div class="d-flex justify-content-center">
<img class="w-40 h-auto center-block" src="./img/Logo horizontal.png" alt="Vegaz logo">
</div>
<div class="d-flex justify-content-center mt-3">
<i class="fab fa-instagram fa-4x me-3"></i>
<i class="fab fa-facebook fa-4x"></i>
</div>
</div>
</div>
<div class="col-1"></div>
<div class="col-5 mx-auto mt-4 mb-4 position-relative">
<div class="d-flex">
<h3 class="text-white fw-bold">About Us</h3>
</div>
<div class="d-flex">
Terms of service
</div>
<div class="d-flex">
Privacy policy
</div>
<div class="d-flex position-absolute bottom-0 start-2">
<span>©2022 Vegaz All rights reserved</span>
</div>
</div>
</div>
</div>
</footer>

Answer 1

You're assigning the main containers a fixed height based on the viewport size (classes height-100 and h-100), even when the viewport is smaller than the content of those containers. The content will therefore overflow the container into whatever comes after it, in this case the footer.