从嵌套列填充可用空间 |引导程序 4

Question

我目前正在开发一个 bootstrap 4 网站，该网站有 2 个（图中的 2 和 3 个）组件，应该填满所有剩余空间。 我在这里看到了很多带有各种答案的问题。我选择了最好的一个，并试图让它适合我的情况。我的尝试如下： https://www.codeply.com/p/sEHcVsMlML

在此代码层中，周围的 div 确实填充了剩余空间。但是我实际上想要填充空间的嵌套 div 没有。他们使用相同的类，所以我不明白为什么。

总体思路是这样的：

1,2 和 3 应填满剩余高度。

Answer 1

您可以设置负边距，并在顶部添加填充

.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>

Answer 2

从 v2 开始就与 BS 合作。并且无法仅使用 Bootstrap 找出任何解决方案。 BS 不是万能的，在某些情况下更容易使用额外的 CSS。使用display: grid; 解决您的任务

• 更多关于Grid basics
• 更多关于grid-template-columns
• 更多关于grid-template-areas

.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>