'Bootstrap container overflowing into footer
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/[email protected]/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">
<a href="" class="text-white" style="text-decoration: none">Terms of service</a>
</div>
<div class="d-flex">
<a href="" class="text-white" style="text-decoration: none">Privacy policy</a>
</div>
<div class="d-flex position-absolute bottom-0 start-2">
<span>©2022 Vegaz All rights reserved</span>
</div>
</div>
</div>
</div>
</footer>Solution 1:[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.
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 | Lucas S. |