Question

我对将display: flex设置为height的{{1}}感到好奇。我想要一个带页脚的布局。但是页脚比配置的要小（不是200px高（红色））。出于演示目的，我添加了一个媒体查询：运行代码片段，减少浏览器宽度，您可以看到页脚的可视高度增加了（到200px（绿色））。

我用Opera，Firefox，Chrome，IE和Edge复制了此内容。所以我想这不是一个错误。但是如何解释这种行为？

vh

.header-body-footer-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 30px);
}

.body {
    height: 100%;
    min-height: 20px;
}

.footer {
    height: 200px;
    background-color: red;
}

    .footer::after {
        content: " - height is not 200px!";
    }

@media only screen and (max-width: 600px) {
    .header-body-footer-container {
        height: auto;
    }

    .footer {
        background-color: green;
    }

        .footer::after {
            content: " - height is 200px!";
        }
}

Answer 1

将 .footer

的height:200px;更改为min-height: 200px;

.header-body-footer-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 30px);
}

.body {
    height: 100%;
    min-height: 20px;
}

.footer {
    min-height: 200px;
    background-color: red;
}

    .footer::after {
        content: " - height is not 200px!";
    }

@media only screen and (max-width: 600px) {
    .header-body-footer-container {
        height: auto;
    }

    .footer {
        background-color: green;
    }

        .footer::after {
            content: " - height is 200px!";
        }
}

    <div class="header-body-footer-container">
    <div class="header">header</div>
    <div class="body">body</div>
    <div class="footer">footer</div>
</div>

Answer 2

感谢Vikas's answer，我找到了解释。

背景：

因此，由于我的height值被忽略了（但是Vikas的min-height起作用了），我得出结论，必须有一些隐式的max-height。的确如此！似乎default value of flex-shrink (which is 1)引入了此隐式max-height值。

为防止flex缩小页脚的大小，我需要在flex-shrink: 0上设置.footer。

显示：“ vh”中的弯曲度和高度会更改页脚的高度

2 个答案: