Блог

Главная - Вопросы по программированию - Начальная загрузка 5 полноэкранное приложение с двумя столбцами с прокручиваемым контентом

Начальная загрузка 5 полноэкранное приложение с двумя столбцами с прокручиваемым контентом

#html #twitter-bootstrap #bootstrap-5

Вопрос:

Я пытаюсь использовать Bootstrap 5 для создания полноэкранной веб-страницы с двумя столбцами с верхним и нижним колонтитулами. Оба столбца содержат содержимое, которое не подходит, и, следовательно, требуются отдельные полосы прокрутки. Кроме того, один из столбцов содержит список с «липкими» заголовками, которые будут оставаться вверху при прокрутке пользователем. Для столбцов со списком прокрутка должна происходить только внутри списка, для основного столбца содержимого прокручивается весь столбец.

До сих пор у меня есть страница, которая выглядит так:

Макет страницы

Проблема, с которой я столкнулся, заключается в том, что прокручиваемый контент в первом столбце, похоже, отключен. Смотрите два следующих снимка экрана, где верхняя граница исчезает, когда элемент «прилипает».

Проблема с верхней частью списка

и внизу, где элемент скрыт за нижним колонтитулом.

Проблема с нижней частью списка

Исходный код выглядит следующим образом:

 <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    
    <!-- header bits -->
    <style>
        html,body {
            height: 100%;
        }
        .sticky-first {
            top: 0;
        }

        .sticky-second {
            top: 41px;
        }
    </style>

    <title>Test</title>
</head>
<body>
<div class="container-fluid h-100 d-flex flex-column">
    <div class="row flex-shrink-0">
        <div class="col-12 p-0 m-0">
            <nav class="navbar navbar-expand-md navbar-dark bg-dark">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">Test Logo</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                            data-bs-target="#navbarCollapse"
                            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarCollapse">
                        <ul class="navbar-nav mb-2 mb-md-0">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Users</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">Boards</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Details</a>
                            </li>
                        </ul>
                        <form class="d-flex ms-5 w-50 me-auto">
                            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        </form>
                        <ul class="navbar-nav mb-2 mb-md-0">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Profile</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Sign Out</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="row flex-fill" style="min-height:0">
        <div class="col-3 border h-100" style="overflow-y: hidden;">
            <ul class="nav nav-tabs mt-3">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Fields</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Operations</a>
                </li>
            </ul>
            <form role="search" class="d-flex align-items-center">
                <input class="form-control mt-3" type="text" placeholder="Filter..."/>
            </form>
            <div class="mt-3 h-100" style="overflow-y: scroll;">
                <ul class="list-group">
                    <li class="list-group-item sticky-top sticky-first"><strong>First Level 1</strong></li>
                    <li class="list-group-item sticky-top sticky-second"><strong>Second Level 1.1</strong></li>
                    <li class="list-group-item">Field</li>
                    <li class="list-group-item sticky-top sticky-second"><strong>Second Level 1.2</strong></li>
                    <li class="list-group-item">Field</li>
                    <li class="list-group-item sticky-top sticky-first"><strong>First Level 2</strong></li>
                    <li class="list-group-item sticky-top sticky-second"><strong>Second Level 2.1</strong></li>
                    <li class="list-group-item">Field</li>
                    <li class="list-group-item sticky-top sticky-second"><strong>Second Level 2.2</strong></li>
                    <li class="list-group-item">Field</li>
                    <!-- ... -->
                </ul>
            </div>
        </div>
        <div class="col-9 border mh-100" style="overflow-y: scroll;">
            <div class="container mt-3">
                <div class="row">
                    <div class="col d-flex">
                        <h2>Untitled Dataset (1)</h2>
                        <button type="button" class="btn btn-outline-primary ms-5">Save</button>
                        <button type="button" class="btn btn-outline-secondary ms-3">Save As</button>
                        <button type="button" class="btn btn-outline-success ms-3">Export</button>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col">
                        <table class="table">
                            <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">First</th>
                                <th scope="col">Last</th>
                                <th scope="col">Handle</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <!-- ... -->
                            </tbody>
                        </table>
                        <nav aria-label="Dataset navigation">
                            <ul class="pagination justify-content-center">
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Previous">
                                        <span aria-hidden="true">amp;laquo;</span>
                                    </a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Next">
                                        <span aria-hidden="true">amp;raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row flex-shrink-0">
        <div class="col-12 border">Footer </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous"></script>
</body>
</html>

Я попробовал несколько итераций, и я могу отдельно заставить прокручиваемый контент работать и заставить нижний колонтитул не блокировать контент. Однако, как только я объединяю их, я получаю описанное поведение.

Есть какие-нибудь предложения?

Ответ №1:

Вместо h-100 повторного использования во вложенном внутреннем списке используйте d-flex flex-column родительский и flex-grow-1 список…

 <div class="container-fluid vh-100 d-flex flex-column">
    <div class="row flex-shrink-0">
        <div class="col-12 p-0 m-0">
            <nav class="navbar navbar-expand-md navbar-dark bg-dark">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">Test Logo</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarCollapse">
                        <ul class="navbar-nav mb-2 mb-md-0">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Users</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">Boards</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Details</a>
                            </li>
                        </ul>
                        <form class="d-flex ms-5 w-50 me-auto">
                            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        </form>
                        <ul class="navbar-nav mb-2 mb-md-0">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Profile</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Sign Out</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="row flex-grow-1" style="min-height:0">
        <div class="col-3 border h-100 d-flex flex-column">
            <ul class="nav nav-tabs mt-3">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Fields</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Operations</a>
                </li>
            </ul>
            <form role="search" class="d-flex align-items-center">
                <input class="form-control mt-3" type="text" placeholder="Filter..." />
            </form>
            <div class="mt-3 flex-grow-1 overflow-auto">
                <ul class="list-group">
                    <li class="list-group-item sticky-top sticky-first"><strong>First Level 1</strong></li>
                    <li class="list-group-item sticky-top sticky-second"><strong>Second Level 1.1</strong></li>
                    <li class="list-group-item">Field</li>
                    <li class="list-group-item sticky-top sticky-second"><strong>Second Level 1.2</strong></li>
                    <li class="list-group-item">Field</li>
                    <li class="list-group-item sticky-top sticky-first"><strong>First Level 2</strong></li>
                    <li class="list-group-item sticky-top sticky-second"><strong>Second Level 2.1</strong></li>
                    <li class="list-group-item">Field</li>
                    <li class="list-group-item sticky-top sticky-second"><strong>Second Level 2.2</strong></li>
                    <li class="list-group-item">Field</li>
                    <!-- ... -->
                </ul>
            </div>
        </div>
        <div class="col-9 border mh-100" style="overflow-y: scroll;">
            <div class="container mt-3">
                <div class="row">
                    <div class="col d-flex">
                        <h2>Untitled Dataset (1)</h2>
                        <button type="button" class="btn btn-outline-primary ms-5">Save</button>
                        <button type="button" class="btn btn-outline-secondary ms-3">Save As</button>
                        <button type="button" class="btn btn-outline-success ms-3">Export</button>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">First</th>
                                    <th scope="col">Last</th>
                                    <th scope="col">Handle</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <!-- ... -->
                            </tbody>
                        </table>
                        <nav aria-label="Dataset navigation">
                            <ul class="pagination justify-content-center">
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Previous">
                                        <span aria-hidden="true">amp;laquo;</span>
                                    </a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Next">
                                        <span aria-hidden="true">amp;raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row flex-shrink-0">
        <div class="col-12 border">Footer </div>
    </div>
</div>

https://codeply.com/p/K7HqH21vTl

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

1. Блестяще, спасибо! Это исправило проблему с нижним колонтитулом, однако верхняя граница «липкого» заголовка первого уровня все еще обрезается. Интересно, что это происходит только тогда, когда заголовок второго первого уровня (Первый уровень 2) прилипает.

2. Добавьте свои собственные липкие классы, и это сработает.. Я обновил код

3. Хм, я все еще понимаю, что верхняя граница исчезает, когда First Level 2 прилипает. Но, возможно, это не связанная с этим проблема. Я приму ваш ответ, так как он решил основную проблему с нижним колонтитулом

Метки: