Question

在我的html定义中，我有4个.hidden{ display: none; }：div（容器）和3个内部垂直对齐：

wrapper

    #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-可以缩小为零。问题是什么？该怎么解决？

Answer 1

请更改页脚背景颜色或包装器背景颜色，并尝试将高度减小到小于最小高度。您可以检查是否应用了最小高度。

Answer 2

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

为什么最小高度样式对div没有影响

2 个答案: