为什么 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 {&nbsp; min-height: 100vh;&nbsp; background-color: red;&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; flex-direction:column;}.sidebar {&nbsp; background-color: blue;&nbsp; height: 100px;&nbsp; width: 100%;}.main-content {&nbsp; background-color: yellow;&nbsp; flex-grow:1;&nbsp; width: 100%;}@media (min-width:768px) {&nbsp; .main-content{&nbsp; width: 80%;}&nbsp;&nbsp; .sidebar {&nbsp; &nbsp; width: 20%&nbsp; }&nbsp; .main {&nbsp; &nbsp; flex-direction:row;&nbsp;}}<div>Header</div><div class="main">&nbsp; <div class="sidebar">&nbsp; &nbsp; sidebar&nbsp; </div>&nbsp; <div class="main-content">&nbsp; &nbsp; main-content&nbsp; </div></div>

Answer 2

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

Answer 3

尝试这个@media (min-width: 768px) {&nbsp; .main-content,&nbsp; .sidebar {&nbsp; &nbsp; width: 100%&nbsp; &nbsp; height: 100%&nbsp; }}

Answer 4

对于height具有百分比值的设置（如.sidebar和.main-content），这些 ( ) 的父元素.main需要定义一个height设置，作为其百分比值的参考。min-height在这种情况下还不够。因此，在 中.main，您可以更改min-height: 100vh为height: 100vh并添加overflow-y: visible以使其变得更大。.main {&nbsp; height: 100vh;&nbsp; overflow-y:visible;&nbsp; background-color: red;&nbsp; display: flex;&nbsp; flex-wrap: wrap;}.sidebar {&nbsp; background-color: blue;&nbsp; height: 100px;&nbsp; width: 100%;}.main-content {&nbsp; background-color: yellow;&nbsp; height: 100%;&nbsp; width: 100%;}@media (min-width: 768px) {&nbsp; .main-content{&nbsp; width: 80%;}&nbsp;&nbsp;&nbsp; .sidebar {&nbsp; &nbsp; width: 20%&nbsp; }}<div>Header</div><div class="main">&nbsp; <div class="sidebar">&nbsp; &nbsp; sidebar&nbsp; </div>&nbsp; <div class="main-content">&nbsp; &nbsp; main-content&nbsp; </div></div>