В настоящее время я использую Bootstrap 4.1.3 для проекта.
Мне удалось создать несколько дочерних элементов с h-100 в flex-fill с помощью оболочки <div class="h-100">.
Хотя он работает так, как задумано в Google Chrome, но мне кажется, что я делаю что-то ужасно неправильное, потому что когда дело доходит до маленьких экранов, эти дочерние элементы увеличивают родительский элемент более чем на 100%.
Есть ли лучший подход в CSS или Bootstrap 4 для достижения нескольких дочерних элементов со 100% -ной высотой внутри родителя с гибкой заливкой, который при сохранении отзывчивости Bootstrap 4?
Вот мой коддемо-ручка для него.
Вот мой пример кода:
html,body {
height:100%;
}
<body>
<!-- Added Flex -->
<div class="d-md-flex flex-column h-100">
<!--p>Nav Bar</p-->
<!-- Show selection when screen is in medium range-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavBar" aria-controls="mainNavBar"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavBar">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Section 1</a>
</div>
</div>
</nav>
<div class="container-fluid d-flex h-100">
<div class="row flex-fill">
<!--Main Content-->
<div class="col-md-8">
<div class="row h-100">
<div id="mainSection" class="col-md-12 d-flex flex-column flex-fill">
<div class="h-100"><!-- <<<Mentioned Wrapper -->
<div id="section1" class="h-100 bg-warning">
<!--Sample Text-->
<p>
Lorem ipsum dolor sit amet, eos ne doming equidem persequeris, vis nostro detracto oportere ne, no
sit
menandri inciderint. Per tacimates salutatus voluptaria ex. An dolor munere sea. Nam et brute
noluisse, per
modus harum nominati no.
</p>
</div>
<div id="section2" class="h-100 bg-success">
<!--Sample Text-->
<p>
Lorem ipsum dolor sit amet, eos ne doming equidem persequeris, vis nostro detracto oportere ne, no
sit
menandri inciderint. Per tacimates salutatus voluptaria ex. An dolor munere sea. Nam et brute
noluisse, per
modus harum nominati no.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Profile Bar-->
<div class="col-md-4">
<div class="h-100 position-fixed" style="border:1px solid yellowgreen;">
<p>Hi I am Darky</p>
<p>
Introduction 1:
Hinc omittam inciderint eu duo, nisl doctus no duo, oratio quidam concludaturque cu vix. Te sea
voluptatibus delicatissimi, nec ex habeo alienum efficiendi, id quis ludus detracto sit. Has ei libris
patrioque, habeo corpora blandit id qui. Solum alterum blandit an quo. Vel modus novum nominavi eu, sit
partem electram ea. Sit vero temporibus ne, sea cu justo dicit accusam.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
- Обновлен вопрос 18/11/2018
Итак, мой вопрос:
Я не понимаю, почему упомянутая оболочка <div class="h-100"> может помочь section1 и section2 быть на 100% высоты 'mainSection' каждый.
Я правильно использую упомянутую упаковку <div class="h-100"> и flexbox?