为什么最小高度样式对 div 无效

Question

在我的 html 定义中，我有 4 个 divs：wrapper（容器）和 3 个内部垂直对齐：

    #wrapper {
      width: 80%;
      height: 90vh;
      margin-top: 5vh;
      margin-left: 10%;
      margin-right: 10%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    background-color: #e2e2e2;
    border-radius: 5px;
    box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    }

    div.editor {
      width: 100%;
      height: 60%;
    }

    #header {
      width: 100%;
      height: 15%;
      min-height: 75px;
    }

    #footer {
      width: 100%;
      height: 25%;
      min-height: 108px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      /* Centering y-axis */
      flex-flow: row nowrap;
      align-items: center;
    }

<head>
<link rel="stylesheet" href="/stylesheets/style.css">
<title>Web Editor</title>
</head>

<body>
<div id="wrapper">
    <div id="header">
        <h1>Web Editor</h1>
    </div>
    <div class="editor" id="editor"></div>
    <div id="footer">
    </div>
</div>
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/javascript");
</script>
</body>

min-height 适用于 header 但不适用于 footer - 可以缩小为零。问题是什么？如何解决？

Answer 1

向 div 添加标记颜色后，很难理解原因：问题是 footer div 没有背景，因此在小屏幕高度上看起来像是缩小了。需要加灰色背景或者外包装。

Answer 2

请更改页脚背景颜色或包装背景颜色，并尝试将高度降低到小于 min-height.You 可以检查是否应用了 min-height。

为什么最小高度样式对 div 无效

Why min-height style have no effect for a div

html

css

ace-editor