【问题标题】：menu overlay - can't make content full height菜单覆盖 - 无法使内容全高
【发布时间】：2018-12-18 22:44:29
【问题描述】：

我正在尝试使菜单叠加层的内部内容占据整个高度，以便我可以将内容置于页面中间。我尝试使用 height: 100% 也尝试过 height: 100vh 但没有运气。它没有成功，因为我在 codepen 和 codepen 中使用相同的代码，但它在我的笔记本电脑上的项目中不起作用......非常困惑。

这里是codepen链接：

https://codepen.io/harp30/pen/yqLdWp?editors=0110

哈巴狗代码：

#js-menu.menu
    .container
       .menu__content 
            ul.menu__list.menu__list--top
              li.menu__link
                a.link-anchor.active About us
              li.menu__link
                a.link-anchor Our Team
              li.menu__link
                a.link-anchor areas of practice
              li.menu__link
                a.link-anchor news &amp; media

            ul.menu__list.menu__list--bottom.u-display-none-landscape-xs
              li.menu__link.u-margin-bottom--small
                a.link-anchor <span>Telephone:</span> 
                    | 1 905 800 0000 
              li.menu__link.u-margin-bottom--small
                a.link-anchor <span>Admin Email:</span> poonam@cervinibhatia.com 
              li.menu__link
                a.link-anchor <span>Address:</span> 000 Brit Road East, 
                    | Suite Mississi, ON L00 000 
              li.menu__link
                a.link-anchor Harp Designs

scss 代码：

.menu{
  position: fixed;
  z-index: 6;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  z-index: 10;

  background-color: #2D2D2D;

  @include element('content'){
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    border: 1px solid green;
  }

  @include element('list'){

    @include modifier('top'){
      // height: calc(70vh + 70px);
    }

    @include modifier('bottom'){
      // height: calc(30vh + 70px);

      .menu__link{
        margin-bottom: 0;
        padding: 5px;
        span{
          color: $color-offset--white;
          font-size: .9rem;
        }
        .link-anchor{
          color: $color-offset--light-grey;
          font-size: 0.8rem;
          text-transform: unset;

          &:last-of-type{
            margin-top: 10px;
            display: block;
          }
        }
      }
    }
  }

  @include element('link'){
    margin-bottom: 1.875rem;
    &:last-of-type{
      margin-bottom: 0;
    }
    .link-anchor{
      color: $color-offset--light-grey;
      font-family: $type-font--cormorant-garamond;
      font-size: 1.7rem;
      letter-spacing: 0.175em;
      text-transform: uppercase;
      transition: all 0.6s;

      @media screen and(orientation: landscape) and (max-width: 815px){
        font-size: 1.2rem;
      }
    }
    .active{
      color: $color-offset--green;
    }
  }
}

.container{
  position: relative;
  width: calc(100% - 50px);
  max-width: 1400px;
  margin: 0 auto;

  @media only screen and(min-width: 1000px){
    width: calc(100% - 255px);
  }
}

正如您在链接中看到的那样，这段代码在 codepen 上看起来很棒，但在我的最后.. 相同的代码不会占据菜单的整个高度。

这是一张图片：

另外，如果我将 .menu 的高度设置为 100vh，那么它只会增长到视口高度的 75% 左右，为什么会发生这种情况？但是如果 .menu 的高度为 100%，它就可以正常工作。

下面这张图也可以说明这一点：

【问题讨论】：

这可能是一个 hack，但不要在 .menu 上使用高度、宽度 100%，而是删除 width 和 height 并设置 right: 0; bottom: 0。这是一种强制fixed 或absolute 定位元素占据整个屏幕的技巧。
好的，谢谢。它很奇怪..它现在没有任何问题，我从来没有改变过任何东西。我想自从我开始使用 webpack 以来……没有什么是正确的。除了 webpack 之外，还有什么其他东西可以用于构建工具。老实说，我已经厌倦了。我想我在尝试使用 webpack 上花费的时间比实际开发 web 的时间要多。
我开始使用 Parcel.js。你也可以看看 Browserify
好的，谢谢。我将开始使用 parcel.js 并且还有汇总。我会试试这两个。再次感谢您指导我。

标签： html css flexbox

【解决方案1】：

尝试使用 CSS 边距。制作一个“DIV”标签，将您要向上移动的所有代码包围起来，给它一个 ID。

这是css：

id {

边距：-50px;

}

继续玩弄数量。

如果不是这样，请尝试使用填充。

【讨论】：