Блог

Главная - Вопросы по программированию - Как расположить контейнер вертикально под навигационной панелью без появления полосы прокрутки?

Как расположить контейнер вертикально под навигационной панелью без появления полосы прокрутки?

#html #css #bootstrap-4

Вопрос:

Я создаю приложение с помощью начальной загрузки 4. Это приложение имеет навигационную панель и контейнер под навигационной панелью. Вот макет приложения:

 <body>
    <div id="root">
        <div>
            <nav id="navbar" class="navbar navbar-expand navbar-dark bg-dark">
                <div id="logo" title="App"/>
                <button aria-controls="navbar-nav" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed">
                    <span class="navbar-toggler-icon"/>
                </button>
                <div class="navbar-collapse collapse" id="navbar-nav" style="--logoHeight:68px;">
                    <div class="mr-auto navbar-nav">
                        <a href="/home" class="nav-link">Menu</a>       
                    </div>
                </div>
            </nav>
            <div class="mt-2 container-fluid">
                <div>
                    <div class="d-flex align-items-center vh-100">
                        <div class="container" id="theContainerToCenterVertically">                         
                        </div>
                    </div>
                    <span/>
                </div>
            </div>
        </body>

Я хочу по вертикали центрировать контейнер в вертикальном направлении. Текущий код делает это, но появляется полоса прокрутки, даже если содержимое помещается на одной странице. Как я могу вертикально центрировать этот div без появления полосы прокрутки, если содержимое помещается на одной странице?

Комментарии:

1. попробуйте body{overflow: hidden;} .Используйте это, если и только если у вас есть страница, которая помещается на одном экране.

Ответ №1:

Вы можете использовать класс Bootstrap overflow-hidden, чтобы скрыть любое содержимое, которое превышает высоту вашей страницы и не имеет полос прокрутки. И вы можете использовать flex, чтобы заставить ваш раздел содержимого заполнить доступное пространство (а затем использовать h-100, чтобы дочерние элементы заполнили это пространство.

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid px-0 d-flex flex-column vh-100">
    <nav id="navbar" class="navbar navbar-expand navbar-dark bg-dark">
        <div id="logo" title="App" />
        <button aria-controls="navbar-nav" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed">
            <span class="navbar-toggler-icon" />
        </button>
        <div class="navbar-collapse collapse" id="navbar-nav" style="--logoHeight:68px;">
            <div class="mr-auto navbar-nav">
                <a href="/home" class="nav-link">Menu</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid mt-2 flex-grow-1 overflow-hidden">
        <div class="row h-100">
            <div class="col-4 h-100 d-flex flex-column justify-content-center">
                <p>
                    This columnamp;rsquo;s content is vertically centered and is hidden if it exceeds the column height.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, eum? Officia, tenetur iste nemo soluta esse nesciunt nostrum quod ut ab rem eaque, facere magnam possimus quia error, praesentium veniam? Quis, iste? Repellat magni eveniet quos minima dignissimos deserunt cupiditate a animi! Repudiandae nobis sequi quas libero aliquam officia dolor, vero quod obcaecati recusandae ut deleniti consequuntur explicabo exercitationem fugiat quidem. Odit iusto voluptatem possimus dicta recusandae soluta odio, natus nobis, earum eos rerum ratione atque temporibus tenetur numquam reiciendis non. Odit adipisci, numquam fuga facere nesciunt aperiam consectetur expedita autem iure incidunt eligendi placeat necessitatibus animi blanditiis aspernatur nostrum.
                </p>                    
            </div>
            <div class="col-8">
                <p>This column content is not centered</p>
            </div>
        </div>
    </div>
</div>

Я использовал две колонки для области содержимого просто в качестве примера. Вы можете использовать один col или col-12 , если вам нужна только одна колонка.

Метки: