Заполнение доступного пространства из вложенных столбцов | Bootstrap 4

Question

В настоящее время я работаю над сайтом bootstrap 4, который имеет 2 компонента (2 и 3 на чертеже), которые должны заполнить все оставшееся пространство. Я видел здесь множество Вопросов с разными ответами. Я выбрал лучший и постарался приспособить его к моей ситуации. Моя попытка заключается в следующем: https://www.codeply.com/p/sEHcVsMlML

В этом коде окружающие div'ы заполняют оставшееся пространство. Но вложенные div, которые я действительно хочу заполнить, не работают. Они используют одни и те же классы, поэтому я не понимаю, почему.

Общая идея такова: Главная идея

1,2 и 3 должны заполнить оставшуюся высоту.

Answer 1

Работал с BS с v2. И не могу найти никакого решения, используя только Bootstrap. BS не всемогущ и в некоторых случаях намного проще использовать дополнительный CSS. Ваша задача решается с помощью display: grid;

• Подробнее о Основы сетки
• Подробнее о grid-template-columns
• Подробнее о grid-template-зонах

.my-grid {
  display: grid;
  grid-template-columns:  100px 1fr 1fr; /* 3 columns with each width */
  grid-template-rows: auto 1fr; /* first row - auto height, second row - all the rest height */
  grid-template-areas: 
    "left top2 top3"
    "left bottom2 bottom3";
  min-height: calc(100vh - 56px); /* 56px is the height of nav */
  /* for acting like .row in .comntainer, optional */
  margin-right: -15px;
  margin-left: -15px;
}
.grid-left-1 {
  grid-area: left; /* refers to grid-template-areas of parent */
  background-color: #8ca0ff;
}
.grid-top-2 {
  grid-area: top2;
  background-color: #ffa08c;
}
.grid-bottom-2 {
  grid-area: bottom2;
  background-color: #ffff64;
}
.grid-top-3 {
  grid-area: top3;
  background-color: #8eff8c;
}
.grid-bottom-3 {
  grid-area: bottom3;
  background-color: #a764ff;
}

/* for screen < 510, the example of how you can treat grid on smaller screens*/
@media (max-width: 510px) {
  .my-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr; 
    grid-template-areas:
      "left left"
      "top2 top3"
      "bottom2 bottom3";
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container-fluid d-flex flex-column vh-100 overflow-hidden">
    <nav class="row navbar navbar-light bg-light navbar-expand px-0 flex-shrink-0">
        <a class="navbar-brand" href="#">App</a>
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">More</a></li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
        </ul>
    </nav>
    
    <div class="my-grid">
      <div class="grid-left-1">1</div>
      <div class="grid-top-2">Some text</div>
      <div class="grid-bottom-2">2</div>
      <div class="grid-top-3">Some text</div>
      <div class="grid-bottom-3">3</div>      
    </div>
</div>

ОБНОВЛЕНО

Простите, тот, который использует классы BS. Подробнее о Bootstrap flex

.my-height {
  height: calc(100vh - 56px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container-fluid d-flex flex-column vh-100 overflow-hidden">
    <nav class="row navbar navbar-light bg-light navbar-expand px-0 flex-shrink-0">
        <a class="navbar-brand" href="#">I'm 56px height</a>
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">More</a></li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
        </ul>
    </nav>
    
    <div class="row">
      <div class="col-4 my-height bg-primary  overflow-auto">
        1
      </div>
      <div class="col-4">
        <div class="d-flex flex-column my-height">
          <div class="bg-secondary">
            Some text
          </div>
          <div class="flex-fill bg-success overflow-auto">
            2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="d-flex flex-column my-height">
          <div class="bg-secondary">
            Some text
          </div>
          <div class="flex-fill bg-success overflow-auto">
            3
          </div>
        </div>
      </div>
    </div>
</div>

Answer 2

Вы можете установить отрицательное поле и добавить отступ сверху

.orange{
    background: orange;
    margin-top: -40px;
    padding-top: 50px;
 
}

.pink{
    background: pink;
    margin-top: -40px;
    padding-top: 50px;

}
.title{
    z-index: 1;
    background: red; //I add red to test
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid d-flex flex-column vh-100 overflow-hidden">
    <nav class="navbar navbar-light bg-light navbar-expand px-0 flex-shrink-0">
        <a class="navbar-brand" href="#">App</a>
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">More</a></li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
        </ul>
    </nav>
    <div class="row flex-grow-1 overflow-hidden">
        <div class="col-2 mh-100 overflow-auto py-2">
            <h6>Sidebar</h6>
            <ul class="nav flex-column bg-info rounded">
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">Link</a>
                </li>
            </ul>
        </div>
        <div class='col mh-100 overflow-auto'>
            <div class='row flex-grow-1'>
                <div class='col mh-100 overflow-auto'>
                    <div class='row flex-shrink-0'>
                        <div class="col title">
                            <h3>Body content</h3>
                        </div>
                    </div>
                    <div class='row flex-grow-1'>
                        <div class="col pink mh-100 overflow-auto">
                            <h2>This div must fill remaining height</h2>
                            <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
                        </div>
                    </div>
                </div>
                <div class='col mh-100 overflow-auto'>
                    <div class='row flex-shrink-0'>
                        <div class="col title">
                            <h3>Body content</h3>
                        </div>
                    </div>
                    <div class='row flex-grow-1'>
                        <div class="col orange mh-100 overflow-auto">
                            <h2>This div must fill remaining height</h2>
                            <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>