Как сделать высоту блока до нижней границы родительского блока

Question

Ситуация такая: Изначально не мог сделать блок body на всё окно браузера (который, как я понимаю, должен быть изначально растянут по краям окна браузера), эта проблема решилась использованием свойства min-height: 100vh;

Внутри блока body у меня есть блок main который я также хочу растянуть на все окно. С этим опять же может помочь min-height: 100vh; Но 100vh это размер относительно окна, а когда я пишу min-height: 100% то между низом окна (и получается границей блока body) и границей блока main появляется огромная пустая область, хотя по идее т.к я использую % он должен расположить блок main по всей высоте блока body и данной области быть не должно... Также пустая область исчезает если увеличить контент внутри блока main (как раз таки, за счет увеличения области блока main). Подскажите пожалуйста из-за чего эта пустая область появляется?

body {
  background: #ffe3e3;
  margin: 0px;
  min-height: 100vh;
}

nav {
  position: fixed;
  background: #3604bf;
  width: 100%;
  height: 60px;
  top: 0px;
}

main {
  background: #ff9ebb;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  min-height: 100%;
  height: 100%;
}

img {
  width: 50px;
  height: 50px;
}

article {
  margin: auto;
}

#container-latin {
  margin-top: 10px;
}

#container-standart {
  margin-top: 10px;
}

h1 {
  margin: auto;
}

<nav>
  <h4>h4</h4>
</nav>
<main>
  <h1>h1</h1>
  <div id="container-latin">
    <article>
      <h3>h3</h3>
      <img src="http://via.placeholder.com/50x50/33ff99/555555?text=foto" alt="photo">
    </article>
    <article>
      <h3>h3</h3>
      <img src="http://via.placeholder.com/50x50/33ff99/555555?text=foto" alt="photo ">
    </article>
    <article>
      <h3>h3</h3>
      <img src="http://via.placeholder.com/50x50/33ff99/555555?text=foto" alt="photo">
    </article>
  </div>
  <div id="container-standart">
    <article>
      <h3>h3</h3>
      <img src="http://via.placeholder.com/50x50/33ff99/555555?text=foto" alt="photo ">
    </article>
    <article>
      <h3>h3</h3>
      <img src="http://via.placeholder.com/50x50/33ff99/555555?text=foto" alt="photo">
    </article>
  </div>
</main>

Answer 1

Семён, наблюдаю, как Вы мучаетесь уже несколько часов с одним вопросом. Отвечаю на Ваш вопрос: чтобы растянуть дочерний блок по высоте на 100%, необходимо родительскому блоку, а также до самого и включительно body и html также указать высоту 100%. При необходимости для родительского блока нужно указать overflow: hidden Вот пример:

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100%;
  width: 50%;
  background-color: green;
}

.wrp {
  height: 100%;
  width: 30%;
  background-color: red;
}

<div class="wrapper">
  <div class="wrp"></div>
</div>

БЛОГ НА HUSL

Как сделать высоту блока до нижней границы родительского блока

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