猿问

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

我有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>


不负相思意
浏览 205回答 4
4回答

梦里花落0921

您需要添加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>

侃侃尔雅

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

沧海一幻觉

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

拉莫斯之舞

对于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>
随时随地看视频慕课网APP

相关分类

Go
我要回答