Bootstrap 4 设置高度：100%；到具有 flex-grow:1 的 flex 项的子项

Question

为什么将height:100% 设置为具有flex-grow:1 的弹性项目（也是弹性容器）的子项不能按预期工作？

将height: 100% 设置为此子元素应该使其具有其父元素（flex-grow:1 父元素）的高度，但事实并非如此，所以我显然错了。 我想知道height:100% 在这种情况下的含义。为什么使用此设置项目不占据其父项的全部高度。

这是 HTML（需要引导）

.theHeader {
    background-color: #336B87;
    color: white;
    padding: 5px 15px;
}

.project-manager {
    border-right: 1px solid black;
    height: 100%;
}

.flex-content {
    display: flex;
    flex-flow: column;
    height: 100vh;
}

.flex-grow-this {
    flex-grow: 1;
}

<div class="container-fluid flex-content">
    <header class="container-fluid theHeader">
        <h1 class="logo">ToDo Manager</h1>
    </header>
    <div class="container-fluid row flex-grow-this">
        <aside class="col-2 project-manager">
            sek
        </aside>
        <section class="col-10 to-do-list">

        </section>
    </div>
</div><!--end of main div-->

Answer 1

尝试将 h-100 类添加到父 div

<div class="container-fluid flex-content">
      <header class="container-fluid theHeader">
        <h1 class="logo">ToDo Manager</h1>
      </header>
      <div class="container-fluid row flex-grow-this h-100" >
        <aside class="col-2 project-manager">
                    sek
                </aside>
        <section class="col-10 to-do-list">
asd
                </section>
      </div>
    </div>

这是你所期望的吗？

Answer 2

您尚未将主体的边距和填充设置为零，这就是它从顶部留出空间的原因。请参阅 sn-p。

body {
  padding:0;
  margin:0;
}
.theHeader {
    background-color: #336B87;
    color: white;
    padding: 5px 15px;
}

.project-manager {
    border-right: 1px solid black;
    height: 100%;
}

.flex-content {
    display: flex;
    flex-flow: column;
    height: 100vh;
}

.flex-grow-this {
    flex-grow: 1;
}

<div class="container-fluid flex-content">
    <header class="container-fluid theHeader">
        <h1 class="logo">ToDo Manager</h1>
    </header>
    <div class="container-fluid row flex-grow-this">
        <aside class="col-2 project-manager">
            sek
        </aside>
        <section class="col-10 to-do-list">

        </section>
    </div>
</div><!--end of main div-->

Answer 3

通过清理代码和correctly using the Bootstrap grid 解决了一些问题。 布局应该只是container-fluid > row > columns。不要使用嵌套容器。您不需要为 flexbox 和 height 使用额外的 CSS。 Bootstrap 4 包括 Utility classes ：

• flex-grow-1
• d-flex 弹性列
• vh-100

只需为颜色/边框/填充添加 CSS...

.theHeader {
    background-color: #336B87;
    color: white;
    padding: 5px 15px;
}

.project-manager {
    border-right: 1px solid black;
}

那么 HTML 就是...

<div class="d-flex flex-column vh-100">
    <header class="theHeader">
        <h1 class="logo">ToDo Manager</h1>
    </header>
    <div class="container-fluid d-flex flex-column flex-grow-1">
        <div class="row flex-grow-1">
            <aside class="col-2 project-manager">
                aside
            </aside>
            <section class="col-10 to-do-list">

            </section>
        </div>
    </div>
</div>

注意：将height:100% 添加到子col-2 实际上会阻止它填充父级的高度。只要确保父 row 是 flex-grow-1

演示：https://www.codeply.com/go/IHAHhF8qEa