IE 11: элемент с min-height: 100vh вызовет полосу прокрутки

Question

Я уже прочитал много постов о IE 11 с дисплеем: flex и min-height, но не нашел своего ответа.

У меня нормальный <div> с min-height: 100vh;.В этом <div> у меня есть еще один элемент с margin-bottom: 5px;.Теперь весь внешний <div> имеет полосу прокрутки и прозрачную границу внизу в 5 пикселей.

Когда я увеличиваю поле, зазор внизу тоже увеличивается.

Пример:

<div class="layout">
   <div class="panel">
      Some content
   </div>
</div>

body {
  margin: 0;
}

.layout {
  min-height: 100vh;
  background: orange;
}

.panel {
  margin-bottom: 40px;
  background: white;
  border-radius: 5px;
  padding: 5px;
}

<div class="layout">
  <div class="panel">
    Panel
  </div>
</div>

Теперь я сделал фрагмент кода, я вижу, что он также работает неправильно в Chrome.

Надеюсь, вы понимаете меня, но если вам нужнобольше информации, пожалуйста, спросите.Я надеюсь найти ответ!

Спасибо, Рональд.

Answer 1

Ваша проблема из-за падения поля , и ее можно исправить различными способами.

В зависимости от вашего случая проще всего использовать переполнение: скрыто для .layout:

.layout {
  min-height: 100vh;
  background: orange;
  overflow: hidden;
}

Вы также можете использовать padding-bottom на .layout вместо margin-bottom на .panel, чтобы избежать проблемы с полями.

Другой вариант может заключаться в том, чтобы очистить .layout следующим образом:

.layout:before,
.layout:after {
    content: ' ';
    display: table;
}