引导容器溢出到页脚

Question

我正在构建一个基于bootstrap5的页面，但是我在页脚和主内容容器的定位上遇到了问题。

在我添加页脚之前，页面运行良好：

页脚前图片：

​

页脚后图片：

​

我在这里提供了一个简化的代码片段(所有的映射和一些样式都被破坏了，但是请注意页面底部的溢出)：

​

@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">
                        <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>

​

Answer 1

您将根据视口大小(类为height-100和h-100)为主容器分配固定高度，即使视图端口小于这些容器的内容。因此，内容将使容器溢出到它之后的任何东西中，在本例中是页脚。