0

我创建了一个从屏幕右侧进入的侧推菜单，但是我试图使其在较小的屏幕尺寸下可用。

为此，我首先给它一个min-height并使用overflow: auto;- 所以如果用户屏幕太小，他们会看到一个滚动。

但是，在测试中，菜单滚动似乎不允许您滚动到菜单底部。

CodePen： http ://codepen.io/gutterboy/pen/PPVjNO

HTML：

<div class="wrapper">
  <div class="page-wrap">
    <div class="container-fluid">
      <div class="row">
        <header class="col-sm-12">
          <button id="toggle-menu">Toggle Menu</button>
        </header>
      </div>
      <div class="main-wrap row">
        <div id="content" class="content col-sm-10">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

  <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>

  <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>

  <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>

  <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
        </div>
        <aside class="sidebar col-sm-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu pellentesque purus. Nulla placerat at ligula non ultrices. Fusce posuere, augue eget porta scelerisque, felis magna malesuada ligula, sit amet fermentum diam neque a velit. Suspendisse volutpat nec justo at eleifend. Quisque eu efficitur augue. Mauris sapien metus, scelerisque vel egestas vel, accumsan in tortor. Integer ultrices feugiat dui, et ultricies orci tristique non. Vestibulum scelerisque metus sed cursus rhoncus. Proin dictum malesuada enim, ac maximus odio sollicitudin sed. Donec sollicitudin porta nisi quis venenatis. Vivamus elementum sem ac nisl tincidunt pretium. Pellentesque blandit fringilla mi, et eleifend lectus vulputate ut. Etiam rutrum, elit eu tincidunt commodo, odio justo pretium dui, non efficitur arcu libero in sapien. In placerat convallis tortor eu egestas. 
        </aside>
      </div>
    </div>
  </div>

  <nav class="main">
      <ul>
        <li>
            <a href="#">Home</a>
            <ul>
                <li><a href="">Child Item</a></li>
                <li><a href="">Child Item</a></li>
                <li><a href="">Child Item</a></li>
                <li><a href="">Child Item</a></li>
                <li><a href="">Child Item</a></li>
            </ul>
        </li>
        <li>
            <a href="#">About</a>
            <ul>
                <li><a href="">Child Item</a></li>
                <li><a href="">Child Item</a></li>
                <li><a href="">Child Item</a></li>
                <li><a href="">Child Item</a></li>
                <li><a href="">Child Item</a></li>
            </ul>            
        </li>
        <li>
            <a href="#">Clients</a>
            <ul>
                <li><a href="">Child Item</a></li>
                <li><a href="">Child Item</a></li>
                <li><a href="">Child Item</a></li>
                <li><a href="">Child Item</a></li>
                <li><a href="">Child Item</a></li>
            </ul>            
        </li>
          <li><a href="#">Contact Us</a></li>
      </ul>
  </nav>  

</div>

SCSS：

$menu-width: 300px;

header {

  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  text-align: right;
  height: 57px;
  padding-top: 15px;
  padding-bottom: 20px;
  background-color: #0B093C;
  z-index: 2;

  button {
    color: #fff;
    background-color: transparent;
    border: none;
  }

}

.wrapper {
  max-width: 100%;
  overflow: hidden;
}

.main-wrap {
   position: relative;
   left: 0;
   margin-top: 57px;
   transition: 0.6s ease-in-out;

  .menu-open & {
    left: -$menu-width;
    transition: 0.6s ease-in-out;
  }

}

.content {
  padding-top: 10px;
  padding-bottom: 10px;
  height: 500px;
  background-color: #827FB2;
  transition: 0.6s ease-in-out;
}

.sidebar {

  padding-top: 10px;
  padding-bottom: 10px;
  height: 500px;
  background-color: #363377;
  color: #fff;
  transition: 0.6s ease-in-out;
}

nav.main {

  position: fixed;
  top: 57px;
  right: -$menu-width;
  width: $menu-width;
  height: calc(100vh - 57px);
  min-height: 500px;
  padding: 15px;
  background-color: #0B093C;
  transition: 0.6s ease-in-out;
  overflow-y: auto;
  z-index: 2000;

  .menu-open & {
    right: 0;
  }

  li {
    list-style: none;
    margin-bottom: 10px;
  }

  a {
    font-size: 16px;
    color: #fff;
  }

}

JS：

$(document).ready(function($) {

  $('#toggle-menu').on('click', function(e){

    e.preventDefault();

    $('.wrapper').toggleClass('menu-open');

  });

});

我在这里做错了什么？

4

0 回答 0