Question

我从CSS Tricks开始学习本教程，

https://css-tricks.com/boxes-fill-height-dont-squish/

它显示了如何在每个盒子中放置柔性盒，占据尽可能多的空间来填充屏幕的高度......

使窗口少于750px - ＆gt; http://thisisgiorgio.meteor.com/

我认为我完全按照他说的做了，但是div并没有占据屏幕的100％..

我的HTML：

    <div class="main-wrapper">
  <div class="home-mob">THIS IS GIORGIO</div>
  <div class="btns-wrapper">


      <div class="home-btn">
        MUSIC
      </div>
      <div class="home-btn">
        WEB
      </div>
      <div class="home-btn">
        GRAPHIC
      </div>
      <div class="home-btn">
        CONTACT
      </div>


  </div>

</div>

我的sass：

    body
  background-color: rgb(5, 10, 37)
  color: white
  font-family: 'Source Sans Pro', 'PT Sans Narrow'
  max-width:1280px
  margin: 0 auto
  height: 100%
  font-weight: bold
  @media (max-width: 750px)
    .main-wrapper
      .home-mob
        font-size: 6em
        text-align: center
      .btns-wrapper
        min-height: 100%
        display: flex
        flex-direction: column
        background: green
        .home-btn
          flex: 1
          font-size: 3em
          display: flex;
          flex-direction: column
          justify-content: center

任何想法都错了吗？谢谢！

链接：http://thisisgiorgio.meteor.com/

Flexbox项目高度不会增加到100％

0 个答案: