1

Ситуация такая: Изначально не мог сделать блок 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>

Скрин с пустой областью

Область блока body

Область блока main

4
  • 1
    пример кода покажите - я по русскому плохо понимаю 30 апр 2020 в 16:47
  • @MaximLensky Добавил
    – Семён
    30 апр 2020 в 16:59
  • Я проблемы, описанной в вопросе, не наблюдаю...
    – Air
    30 апр 2020 в 18:20
  • @Air Добавил скрины как у меня... Кстати, при увеличении размера страницы эта область пропадает, ну или как я написал в вопросе: при добавлении контента (если фото достаточно большие) блок main автоматически увеличится и пустой зоны не будет.
    – Семён
    30 апр 2020 в 19:27

1 ответ 1

0

Семён, наблюдаю, как Вы мучаетесь уже несколько часов с одним вопросом. Отвечаю на Ваш вопрос: чтобы растянуть дочерний блок по высоте на 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.