Bootstrap макет flexbox с вложенными столбцами и полосами прокрутки - PullRequest
Новая
       8

Bootstrap макет flexbox с вложенными столбцами и полосами прокрутки

0 голосов
/ 04 февраля 2020

Я пытаюсь добиться этого макета:

enter image description here

Вот мой код: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en" class="h-100">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Flex Test</title>

    <script src="http://flex.test/js/app.js" defer></script>
    <link href="http://flex.test/css/app.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
    <nav class="navbar navbar-expand-md navbar-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fa fa-directions text-primary"></i> Flex Test
            </a>
        </div>
    </nav>

    <div class="container h-100 py-4">
        <div class="row h-100">
            <div class="col h-100">
                <div class="d-flex flex-column h-100">
                    <div class="border-bottom bg-success">
                        Lorem ipsum.
                    </div>
                    <div class="bg-primary flex-grow-1 mh-100 overflow-auto">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </div>
                </div>
            </div>
            <div class="col h-100 bg-danger overflow-auto">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
        </div>
    </div>
</body>
</html>

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

Я понятия не имею, как это сделать sh с помощью flexbox.

Ответы [ 2 ]

0 голосов
/ 04 февраля 2020

Пожалуйста, проверьте мое решение. Здесь я представил простой способ сделать это с помощью гибкого макета. 

body {
  overflow: hidden;
}

.left {
  height: 100vh;
  background-color: orange;
  display: flex;
  flex-direction: column;
}
.left .head {
  min-height: 10px;
  background-color: red;
  flex: 0 0 auto;
}
.left .content {
  overflow-y: auto;
}

.right {
  height: 100vh;
  overflow: auto;
  background-color: yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
  <div class="col-6 px-0">
    <div class="left">
      <div class="head"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendusLorem ipsum dolor sit amet consectetur adipisicing elit. Amet </div>
      <div class="content">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendusLorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendusLorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendusLorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus
      </div>
    </div>
  </div>
  <div class="col-6 px-0">
    <div class="right">
      <div class="content">
        ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis
      </div>
    </div>

  </div>
</div>
0 голосов
/ 04 февраля 2020

Я думаю, я понял: 

<div class="container flex-grow-1 my-4">
    <div class="row h-100">
        <div class="col">
            <div class="d-flex flex-column h-100 bg-info">
                <div class="border-bottom bg-success">
                    sort, search, post
                </div>
                <div class="bg-danger flex-grow-1 overflow-auto" style="height: 0;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
                    Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
                    Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
                    Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
                </div>
            </div>
        </div>
        <div class="col">
            <div class="d-flex flex-column h-100 bg-info">
                <div class="bg-danger flex-grow-1 overflow-auto" style="height: 0;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
                    Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
                    Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
                </div>
            </div>
        </div>
    </div>
</div>

Если есть лучший способ сделать это, я весь слух.

...