Почему стиль минимальной высоты не влияет на div - PullRequest
Новая
       5

Почему стиль минимальной высоты не влияет на div

0 голосов
/ 26 ноября 2018

В моем определении html у меня есть 4 div s: 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 - может уменьшиться до нуля.В чем проблема?Как решить?

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

Пожалуйста, измените цвет фона нижнего колонтитула или цвет фона оболочки и попробуйте уменьшить высоту меньше, чем min -height. Вы можете проверить, применяется ли min-height.

0 голосов
/ 26 ноября 2018

После добавления цветов маркера в div, трудно было понять причину: проблема в footer div не имеет фона и поэтому выглядела как уменьшенная на небольшой высоте экрана.Нужно добавить в него серый фон или поставить внешнюю обертку.

...