Responsive menu viewport height

Question

I added a menu to my responsive website that pops up as soon as the viewport is 714px width or less.

When you click the button a menu slides out from the side across the page. The issue that I can't seem to solve is that I want the menu to be the height of the current viewport without allowing people to scroll down.

Here's a fiddly of what the menu looks like right now: 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

This can be achieved using viewport-percentage length units: https://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths

One option would be to use the vh css unit and specify that the body has height:100vh

https://jsfiddle.net/r61n4y0v/

I added:

body{
  height:100vh;
}

to the CSS file.

You should also check the vh unit's browser compatibility, before using it. You can check here:

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

---

If you'd like to be more specific with the height:100vh; rule, you can remove the overflow:hidden from .site-container-menu and add height:100vh to .menu directly:

https://jsfiddle.net/6won6stx/

Your menu links have both a height defined height:25% and padding...this is not advised as it can lead to unexpected behaviour. It would be better to replace:

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

With:

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

and remove the height:25% from the a element and add height:25vh to the li elements.

https://jsfiddle.net/s5gbk7y1/

I've also made a few other changes such as changing the line-height property on the menu links to 25vh .

Take a look at the latest fiddle and let me know if it helps!