Question

为什么要设置高度：100％；到具有flex-grow：1的flex项目的子项（也是flex容器）；不能按预期工作？设定高度：100％；这个子元素应该使其占据其父对象的高度（flex-grow：1; parent），但事实并非如此，因此我显然错了。我想知道什么高度：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

通过清理代码和correctly using the Bootstrap grid，可以解决一些问题。布局应该只是container-fluid> row> columns。不要使用嵌套容器。您不需要额外的CSS来实现flexbox和height。引导程序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

Answer 2

尝试将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 3

您尚未将主体的边距和填充设置为零，这就是为什么它从顶部留出空间的原因。查看代码段。

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

Bootstrap 4设定高度：100％；到具有flex-grow：1

3 个答案: