id {

Question

我正在尝试使菜单覆盖的内部内容占据全部高度，以便将内容居中在页面中间。我尝试使用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％，则可以正常工作。

下面是一张图片，也显示了这一点：

Answer 1

尝试使用CSS边距。创建一个“ DIV”标签，将您要向上移动的所有代码包围起来，并为其指定ID。

这是CSS：

id {

边距：-50px;

}

继续玩玩。

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

菜单叠加层-无法使内容全高

1 个答案:

id {