响应式菜单视口高度

Question

我在我的响应式网站中添加了一个菜单，当视口宽度为 714 像素或更小时，该菜单就会弹出。

当您单击按钮时，菜单会从页面的一侧滑出。我似乎无法解决的问题是我希望菜单是当前视口的高度，而不允许人们向下滚动。

下面是菜单现在的样子： https://jsfiddle.net/baqcfjt1/1/

<div class="site-container-menu">
  <div class="site-pusher">
    <header class="header">

      <a href="#" class="header__icon" id="header__icon">MENU</a>

      <nav class="menu">
        <a href="#one" class="scrolly">Link 1</a>
        <a href="#three" class="scrolly"><strong>Link 2</strong></a>
        <a href="#two" class="scrolly">Link 3</a>
        <a href="#four">Link 4</a>
      </nav>

    </header>
    <div class="site-content">
      <div class="container-menu">
        <section id="header">
          <div class="headerlogo"><img src="image" /></div>
          <div class="headerlogosmall"><img src="image" /></div>
        </section>

        <section class="main">
          -content-
        </section>


      </div>
    </div>
    <div class="site-cache" id="site-cache"></div>
  </div>
</div>

CSS

.header {
  z-index: -10;
  position: absolute;
}


/* RESPONSIVE */

@media only screen and (max-width: 714px) {
  .container-menu {
    overflow: hidden;
    *zoom: 1;
  }
  /* HEADER */
  .header__logo {
    font: inherit;
    font-weight: 700;
    padding: 0 25px;
    float: left;
  }
  /* MENU */
  .site-pusher,
  .site-container-menu {
    height: 100%;
  }
  .site-container-menu {
    overflow: hidden;
  }
  .site-pusher {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  .site-content {}
  .header {
    position: static;
    height: 66px;
    line-height: 62px;
    color: rgba(228, 91, 65, 1.00);
    background-color: #fff;
  }
  .header__icon {
    position: relative;
    display: block;
    float: left;
    padding-left: 3em;
    font: inherit;
    font-weight: 400;
    font-size: 20px;
    height: 66px;
    cursor: pointer;
  }
  .header__icon:after {
    content: '';
    position: absolute;
    display: block;
    width: 1rem;
    height: 0;
    top: 16px;
    left: 15px;
    box-shadow: 0 10px 0 1px rgba(228, 91, 65, 1.00), 0 16px 0 1px rgba(228, 91, 65, 1.00), 0 22px 0 1px rgba(228, 91, 65, 1.00);
  }
  .menu {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #fff;
    /*    overflow-y: scroll;
        -webkit-overflow-scrolling: touch;*/
    width: 250px;
    -webkit-transform: translateX(-250px);
    transform: translateX(-250px);
    overflow: hidden;
  }
  .menu a {
    display: block;
    padding-top: 2em;
    padding-bottom: 2em;
    color: #666666;
    height: 25%;
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid #d9d9d9;
  }
  .menu a:hover {
    color: #e45b41;
  }
  .with--sidebar .site-pusher {
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }
  .with--sidebar .site-cache {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
  }
}

    $(document).ready(function() {

  (function($) {

    $('#header__icon').click(function(e) {
      e.preventDefault();
      $('body').toggleClass('with--sidebar');
    });

    $('#site-cache').click(function(e) {
      $('body').removeClass('with--sidebar');
    });

  })(jQuery);

});

Answer 1

这可以使用视口百分比长度单位来实现：https://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths

一种选择是使用vh css 单元并指定body 具有height:100vh

https://jsfiddle.net/r61n4y0v/

我补充说：

body{
  height:100vh;
}

到 CSS 文件。

您还应该在使用vh 单元之前检查它的浏览器兼容性。你可以在这里查看：

http://caniuse.com/#feat=viewport-units

---

如果您想更具体地使用height:100vh; 规则，您可以从.site-container-menu 中删除overflow:hidden，然后将height:100vh 直接添加到.menu：

https://jsfiddle.net/6won6stx/

您的菜单链接同时定义了高度height:25% 和填充...不建议这样做，因为它可能导致意外行为。最好更换：

<nav class="menu">
   <a href="#one" class="scrolly">Link 1</a>
   <a href="#three" class="scrolly"><strong>Link 2</strong></a>
   <a href="#two" class="scrolly">Link 3</a>
   <a href="#four">Link 4</a>
</nav>

与：

<nav class="menu">
  <ul>
    <li><a href="#one" class="scrolly">Link 1</a></li>
    <li><a href="#three" class="scrolly"><strong>Link 2</strong></a></li>
    <li><a href="#two" class="scrolly">Link 3</a></li>
    <li><a href="#four">Link 4</a></li>
  </ul>
</nav>

并从a 元素中删除height:25%，并将height:25vh 添加到li 元素中。

https://jsfiddle.net/s5gbk7y1/

我还进行了一些其他更改，例如将菜单链接上的line-height 属性更改为25vh。

看看最新的小提琴，如果有帮助，请告诉我！