Как задать min-height в процентах в footer при этом чтобы footer был полностью заполнен

Question

Итак , проблема заключается в том что написав в пикселях все работает , footer растягивается до всей глубины экрана , но я хочу чтобы min-height был написан в процентах , чтобы он одинаково выглядел на всех устройствах

            <div class="footer-container">
                <div class="footer">
                    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me.png" alt="You">
                    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me1.png" alt="You">
                    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me-2.png" alt="You">
                    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me-3.png" alt="You">
                    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me-4.png" alt="You">
                </div>
            </div>

.footer{
    display: flex;
    width: 100%;
    background-color:rgba(255, 0, 0, 0.1);
    min-height: 200px;
    align-items: center;
    justify-content: space-evenly;
}

Answer 1

задать дополнительно высоту для .footer-container, чтобы .footer было относительно чего высчитывать эти %.

.footer-container {
  height: 400px;
}

.footer {
  display: flex;
  width: 100%;
  background-color: rgba(255, 0, 0, 0.1);
  min-height: 20%; /*высота в итоге будет 80px*/
  align-items: center;
  justify-content: space-evenly;
}

<div class="footer-container">
  <div class="footer">
    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me.png" alt="You">
    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me1.png" alt="You">
    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me-2.png" alt="You">
    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me-3.png" alt="You">
    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me-4.png" alt="You">
  </div>
</div>

или указывать высоту не в %, а в vh - это 1/100 высоты области просмотра.

.footer {
  display: flex;
  width: 100%;
  background-color: rgba(255, 0, 0, 0.1);
  min-height: 20vh;/*20% от высоты области просмотра*/
  align-items: center;
  justify-content: space-evenly;
}

<div class="footer-container">
  <div class="footer">
    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me.png" alt="You">
    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me1.png" alt="You">
    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me-2.png" alt="You">
    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me-3.png" alt="You">
    <img src="C:\Users\Noname\Рабочий стол\html\Картинки/Me-4.png" alt="You">
  </div>
</div>

БЛОГ НА HUSL

Как задать min-height в процентах в footer при этом чтобы footer был полностью заполнен

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