为什么 div 在移动设备上没有占据完整高度

Question

我有3 div1header和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: 1main-content 来覆盖剩余空间（如果你想要的话）

默认属性值为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

只需删除“最小高度：100vh;” 从 .main 开始，您的问题将得到解决！:)

Answer 3

尝试这个

@media (min-width: 768px) {

  .main-content,

  .sidebar {

    width: 100%

    height: 100%

  }

}

Answer 4

对于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>