Почему div не берет полный рост на мобильных устройствах

Question

У меня есть 3 div 1 header, Sidebar и main content. Я использовал flexbox. .main имеет 100vh height, а .sidebar имеет 100px height, а .main-content имеет 100% height. Но он просматривается на мобильном телефоне, а между sidebar и main-content.

отображается пустое пространство.

.main {
  min-height: 100vh;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  background-color: blue;
  height: 100px;
  width: 100%;
}

.main-content {
  background-color: yellow;
  height: 100%;
  width: 100%;
}

@media (min-width: 768px) {
  .main-content{
  width: 80%;}
  
  .sidebar {
    width: 20%
  }
}

<div>Header</div>
<div class="main">
  <div class="sidebar">
    sidebar
  </div>
  <div class="main-content">
    main-content
  </div>
</div>

Answer 1

Вам нужно добавить flex-direction: column к main. И используйте flex-grow: 1 для основного содержимого, чтобы оно охватывало оставшееся пространство (если хотите)

Значение свойства по умолчанию - row. Таким образом, главная и боковая панели расположены бок о бок и имеют одинаковую высоту, равную высоте их контейнера (поведение по умолчанию)

.main {
  min-height: 100vh;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  flex-direction:column;

}

.sidebar {
  background-color: blue;
  height: 100px;
  width: 100%;
}

.main-content {
  background-color: yellow;
  flex-grow:1;
  width: 100%;
}

@media (min-width:768px) {
  .main-content{
  width: 80%;}
 
  .sidebar {
    width: 20%
  }
  .main {
    flex-direction:row;
 }
}

<div>Header</div>
<div class="main">
  <div class="sidebar">
    sidebar
  </div>
  <div class="main-content">
    main-content
  </div>
</div>

Answer 2

Просто удалите "min-height: 100vh;" от .main и ваша проблема будет решена! :)

Answer 3

Для параметра height с процентным значением (как в .sidebar и .main-content) родительскому элементу из них (.main) необходимо определить значение height в качестве ссылки на их процентное соотношение ценность. min-height недостаточно в этом случае.

Итак, в .main вы можете изменить min-height: 100vh на height: 100vh и добавить overflow-y: visible, чтобы увеличить его.

.main {
  height: 100vh;
  overflow-y:visible;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  background-color: blue;
  height: 100px;
  width: 100%;
}

.main-content {
  background-color: yellow;
  height: 100%;
  width: 100%;
}

@media (min-width: 768px) {
  .main-content{
  width: 80%;}
  
  .sidebar {
    width: 20%
  }
}

<div>Header</div>
<div class="main">
  <div class="sidebar">
    sidebar
  </div>
  <div class="main-content">
    main-content
  </div>
</div>

Answer 4

Попробуйте это

@media (min-width: 768px) { .main-content, .sidebar { width: 100% height: 100% } }