Bootstrap 4: сделать прокрутку правой колонки и использовать все доступное вертикальное пространство - PullRequest
Новая
       0

Bootstrap 4: сделать прокрутку правой колонки и использовать все доступное вертикальное пространство

0 голосов
/ 05 апреля 2020

У меня есть простой макет с двумя столбцами Bootstrap 4, как показано ниже: 

<main>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <p>Left column</p>
                <p>Left column</p>
                <p>Left column</p>
            </div>
            <div class="col-md-9">
                <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
                <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
                <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
                <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
                <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            </div>
        </div>
    </div>
</main>

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

РЕДАКТИРОВАТЬ: пара дополнительных пунктов:

  • Если это не ясно из самого вопроса, я хочу растянуть правый столбец в нижней части окна просмотра
  • Над main находятся другие элементы, включая nav, и их высота может динамически изменяться

Ответы [ 3 ]

1 голос
/ 05 апреля 2020

Вы можете добавить два свойства css, чтобы ваш правый столбец всегда растягивался до полной длины доступного размера страницы. И когда данные попытаются выйти за пределы видимого пространства страницы, появится вертикальная прокрутка. Пример кода: 

<div class="col-md-9" style="height: 100vh; overflow-y: auto;">

Вот рабочая песочница: https://codesandbox.io/s/bootstrap-4-scroll-example-stackoverflow-0gdht

0 голосов
/ 05 апреля 2020

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

Поэтому, я думаю, вам просто нужно сделать position:absolute отзывчивым: 

/* 768 is the medium breakpoint */
@media (min-width: 768px) {
    .position-md-absolute {
        position: absolute;
    }
}

, а остальное возможно с помощью Bootstrap служебных классов: 

  <body class="d-flex flex-column min-vh-100">
    <nav class="navbar">
        ...
    </nav>
    <main class="d-flex flex-column flex-fill">
        <div class="container-fluid d-flex flex-column flex-fill">
            <div class="row flex-fill flex-column flex-md-row">
                <div class="col-md-3 overflow-auto">
                    <div class="position-md-absolute">
                        ..
                    </div>
                </div>
                <div class="col-md-9 overflow-auto flex-fill">
                    <div class="position-md-absolute">
                        ..
                    </div>
                </div>
            </div>
        </div>
    </main>
  </body>


/* 768 is the medium breakpoint */
@media (min-width: 768px) {
    .position-md-absolute {
        position: absolute;
    }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<body class="d-flex flex-column min-vh-100">
  <nav class="navbar navbar-light bg-info">
<a class="navbar-brand" href="#">Nav</a>
</nav>
<main class="d-flex flex-column flex-fill">
<div class="container-fluid d-flex flex-column flex-fill">
    <div class="row flex-fill flex-column flex-md-row">
        <div class="col-md-3 overflow-auto">
            <div class="position-md-absolute">
                <p>Left column</p>
                <p>Left column</p>
                <p>Left column</p>
                <p>Left column</p>
                <p>Left column last</p>
            </div>
        </div>
        <div class="col-md-9 bg-info overflow-auto flex-fill">
            <div class="position-md-absolute">
            <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <p>Right column last... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            </div>
        </div>
    </div>
</div>
</main>
</body>

Демонстрация: https://codeply.com/p/93751rK5WQ

0 голосов
/ 05 апреля 2020

Если вы хотите, чтобы только один тег занимал всю ширину, не мешая другим тегам, вам нужно сделать этот тег абсолютным 

  <div class="col-md-9" style="position:absolute;bottom:0;right:0;top:0;overflow-y: auto">

, чтобы другие теги не мешали

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...