- Все родительские элементы div2 должны иметь высоту 100%, включая body и html.
- Используйте
d-flex flex-column для всех родителей div2 , если у них более двух детей. - Используйте
flex-grow-1 для div2 и всех его родителей, если у них больше двое детей.
html,
body {
height: 100%;
}
.w-300px {
width: 300px;
}
.h-200vh {
height: 200vh;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid d-flex flex-column h-100">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="row flex-grow-1 overflow-hidden">
<aside class="col-auto h-100 bg-danger overflow-auto">
<div class="w-300px h-200vh"></div>
</aside>
<div class="col d-flex flex-column h-100 ">
<section class="row bg-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam labore sit at, distinctio velit veritatis atque officia ullam ducimus sapiente ad suscipit inventore impedit minus! Assumenda, modi? Commodi, voluptatum reiciendis?
</section>
<section class="row flex-grow-1 bg-primary overflow-auto">
<div class="col">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis, dolore. Sit quos, soluta temporibus debitis architecto fugit voluptas iusto exercitationem suscipit ea ex blanditiis, facere tempore, quo quidem quasi cum! Id natus iure magni molestiae!
Iusto, quisquam molestias? Exercitationem consequatur voluptas accusamus eveniet magni facere mollitia natus quia neque, dolorum suscipit amet fugiat debitis, corrupti architecto, aliquid illo commodi quasi? Corporis illo doloribus voluptatem
accusamus ullam ex dolores in illum architecto, inventore quam voluptate, mollitia eveniet quidem velit? Consequuntur ut totam delectus accusantium perspiciatis rem veniam eligendi enim expedita voluptate. Deserunt suscipit dignissimos, dolorum
cum culpa molestias est totam dolores eius impedit enim temporibus architecto, cumque ipsam cupiditate tempore eveniet animi sed reiciendis? Illum fugiat, obcaecati tenetur veritatis vitae alias? Natus culpa, saepe fugiat error possimus mollitia,
consectetur repellendus temporibus magnam ipsum nam maiores. Quisquam perspiciatis ea quos incidunt alias! Libero, deleniti. Esse dicta ducimus, tempore fugiat tenetur accusantium corporis? Odit numquam aut illum doloribus provident autem rerum
iusto in natus soluta. Sed illum officia, perspiciatis magni ipsa aspernatur id voluptate molestias consequatur ad esse itaque facere soluta perferendis impedit. Sunt nihil, quasi hic beatae ipsa nostrum neque, necessitatibus quae cumque debitis
impedit corrupti totam dignissimos eum ullam aut quam tempora perferendis recusandae consequatur, iste ratione veniam atque natus! Iusto? Nemo eveniet delectus fuga quibusdam quam non suscipit consequatur. Dolorum consequuntur ullam inventore
iusto corrupti unde, sint consequatur nihil sequi perferendis mollitia tempore error debitis fuga vero! Non, eveniet temporibus. Deleniti nemo maiores error omnis magni magnam sapiente! Tenetur, debitis veniam cupiditate delectus assumenda dignissimos!
Voluptatum qui cumque inventore ducimus reiciendis commodi, neque non voluptate aperiam tempore nobis quidem cum! Expedita obcaecati doloribus iusto possimus! A quae asperiores iure labore vero repudiandae, sint tenetur cupiditate ab nostrum.
Laboriosam sunt iure repellendus repudiandae, veniam molestias animi itaque eveniet laudantium cum. Libero! Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur quaerat eligendi quae excepturi perspiciatis, ipsum aliquid ipsa
repudiandae fugiat, sunt maxime asperiores mollitia labore natus autem voluptatum, error voluptatem quisquam. Pariatur quas aliquam sequi nam iusto excepturi at quod illum cum asperiores, veniam cumque? Officia, assumenda! Sunt impedit minus
molestias optio ea eum omnis quis aliquid commodi accusamus? Doloribus, facere. Vero veniam aliquam distinctio odit aspernatur hic repudiandae explicabo, sed odio aliquid consequuntur repellendus, molestias officiis quos sequi vitae ipsum perferendis
accusantium possimus eaque porro quis inventore? Nemo, aliquid inventore. Qui molestiae distinctio temporibus dolore voluptas. Unde voluptatum velit fugiat error? Deleniti qui iusto aspernatur alias at dolore rerum consequuntur, nam vel inventore,
nisi adipisci? Delectus nam expedita nemo tempora! Libero fuga eum quidem quisquam earum explicabo a quae dolorum, autem alias sequi dolores, velit amet voluptatibus atque veniam natus nam beatae. Laudantium similique maiores eos numquam quae
qui sunt. Ea pariatur laboriosam eum illum maxime porro consequuntur error molestias. Et impedit, a exercitationem quibusdam tempora sit numquam laudantium incidunt quas voluptatem placeat, optio quisquam, obcaecati explicabo hic est iste. Officiis
autem pariatur vitae tempora cum voluptatum amet sapiente dolorem quo corrupti nesciunt atque delectus veritatis, doloribus quis, nostrum et temporibus doloremque. Iure, similique fugiat. Odio eum nulla fugiat consequuntur. Est maxime aspernatur
enim aperiam reiciendis saepe officia labore sunt, id fuga, repellendus doloribus? Repudiandae perferendis, veritatis, quidem maiores iste molestiae placeat soluta impedit iure accusantium quae. Ipsa, velit hic. Commodi eum possimus vitae veritatis
earum! Vero dolorum repellendus, quam, deleniti doloribus tempore, aspernatur cum totam debitis voluptatum veritatis iure asperiores sapiente ea repudiandae dicta facilis reiciendis ut alias quibusdam. Nostrum unde tenetur, quaerat nisi sint
quia debitis veritatis mollitia magni facere laboriosam aliquam id. Dolor, perferendis! Quia architecto eius laboriosam dolore at quas, optio, qui culpa placeat esse sint!
</div>
</section>
</div>
</div>
</div>
Update;
- Используйте overflow: auto; для прокручиваемых элементов и overflow: hidden; для их родительских элементов. Я изменил код:).
Это похоже на Полная высота страницы для "выбора" через Bootstrap 4. Как получить просмотр страницы на изображении 2? , на который я ответил вчера.