Flex-grow 似乎没有调整元素的高度

Question

我希望父元素 app 中的第二个元素 app-item 在空闲 space 时增加高度，这样页脚将始终位于网站底部。但似乎 flex-grow: 1; 不起作用。我应该如何让它工作。在我的其他项目中，它按我的预期工作，但在这里我找不到它不工作的原因。

html, body {
    padding: 0;
    margin: 0;
  }

html{
    height: 100%;
}

body{
    min-height: 100%;
    background-color: #eee;
}

.app{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
    background-color: yellow;
}

.app-item:nth-child(1){
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    background-color: #fdd;
}

.app-item:nth-child(2){
    order: 0;
    flex: 1 0 0;
    align-self: auto;
    background-color: #dfd;
}

.app-item:nth-child(3){
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    background-color: #ddf;
}

<html>
  <body>
    <div class="app">
        
        <div class="app-item">
            <nav class="app-item navbar navbar-expand-lg navbar-dark bg-dark" id="navbar">
                <div class="container-fluid">
                <a class="navbar-brand" href="#">QuoraASoL</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-link" href="#" >Profile</a>
                        <a class="nav-link " href="#">Logout</a>
                        <a class="nav-link " href="#">Create Question</a>
                        <hr>
                        <a class="nav-link " href="#">Login</a>
                        <a class="nav-link " href="#">Register</a>
                    </div>
                </div>
                </div>
            </nav>
        </div>
    
        <div id="main-area" class="app-item">
            Content block
        </div>

        <div class="app-item">
            <nav class="navbar navbar-dark bg-dark" id="footer">
                <div class="container-fluid">
                <a class="navbar-brand" href="#">Adventure Side of Life</a>
                </div>
            </nav>
        </div>

    </div>
  </body>
</html>

Answer 1

您的 .app 容器与其内容一样高，因此内容元素没有 space 增长。

要使 .app 容器与 body 一样高，您可以指定 body 的高度，最小值是整个 window 高度（height: 100%; min-height: 100vh;), 并使 .app 与 body 一样高 (height: 100%;).

html, body {
    padding: 0;
    margin: 0;
  }

html{
    height: 100%;
}

body{
    height: 100%;
    min-height: 100vh;
    background-color: #eee;
}

.app{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
    background-color: yellow;
    height: 100%;
}

.app-item:nth-child(1){
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    background-color: #fdd;
}

.app-item:nth-child(2){
    order: 0;
    flex: 1 0 0;
    align-self: auto;
    background-color: #dfd;
}

.app-item:nth-child(3){
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    background-color: #ddf;
}

<html>
  <body>
    <div class="app">
        
        <div class="app-item">
            <nav class="app-item navbar navbar-expand-lg navbar-dark bg-dark" id="navbar">
                <div class="container-fluid">
                <a class="navbar-brand" href="#">QuoraASoL</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-link" href="#" >Profile</a>
                        <a class="nav-link " href="#">Logout</a>
                        <a class="nav-link " href="#">Create Question</a>
                        <hr>
                        <a class="nav-link " href="#">Login</a>
                        <a class="nav-link " href="#">Register</a>
                    </div>
                </div>
                </div>
            </nav>
        </div>
    
        <div id="main-area" class="app-item">
            Content block
        </div>

        <div class="app-item">
            <nav class="navbar navbar-dark bg-dark" id="footer">
                <div class="container-fluid">
                <a class="navbar-brand" href="#">Adventure Side of Life</a>
                </div>
            </nav>
        </div>

    </div>
  </body>
</html>

Flex-grow 似乎没有调整元素的高度

Flex-grow seems to not adjusting height of elements

html

css

flexbox