如何在具有 flex-grow:1 的 flex 项目的子项上设置 height:100%？

Question

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

设置height: 100%到这个子元素应该让它占据它的父元素的高度（ flex-grow:1父元素）但事实并非如此，所以我显然是错误的。 我想知道height:100%在这种情况下意味着什么。 使用此设置，为什么项目不占据其父级的全高。

这是 HTML（需要 Bootstrap）

 .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

通过清理代码并正确使用 Bootstrap 网格，可以解决一些问题。 布局应该只是container-fluid > row > columns 。 不要使用嵌套容器。 您不需要额外的 CSS 来设置 flexbox 和高度。 Bootstrap 4 包括用于此的实用程序类：

• 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 的 margin 和 padding 设置为零，这就是它从顶部留出空间的原因。 请参阅片段。

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