Для чего wrapper в начале верстки со значением min-height:100% overflow: hidden?

Question

Учусь верстке по роликам на ютубе, многие в начале верстки создают обертку с такими стилями и не раскрывают суть для чего и какая польза от этой записи

.wrapper {
   min-height: 100%;
   overflow: hidden;
}

overflow: hidden еще можно понять, чтобы элементы прятались за границами, а вот min-height зачем, если его указывают в % а процент наследуется от родителя, а верстка то пустая? Объясните этот момент пожалуйста, для чего такое могут применять?

Answer 1

Для того, что-бы при отсутствии контента блок .wrapper не схлопывался а был всегда сто процентов по высоте. Див по умолчанию имеет ширину сто процентов, а высоту автоматическую. Потому при отсутствии контента высота схлопывается до нуля.

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.wrapper {
  min-height: 100%;
  background-color: pink;
  padding-bottom: 150px;
}

.footer {
  background-color: black;
  height: 150px;
  text-align: center;
  margin-top: -150px;
  color: white;
}

.footer>h1 {
  margin: 0;
}

<div class="wrapper"></div>
<div class="footer">
  <h1>Footer</h1>
</div>

БЛОГ НА HUSL

Для чего wrapper в начале верстки со значением min-height:100% overflow: hidden?

Ответы (1 шт):