javascript - 导航移动下拉菜单，制作屏幕尺寸

Question

我的 WordPress 网站上有一个下拉菜单，其中显示了列出的所有页面。

但我想让这个下拉导航填满屏幕的高度。

到目前为止，我的目标是#main-nav-ul 如果我为此设置高度，它会影响下拉菜单的高度。

我知道我需要能够使用 JavaScript 检测屏幕尺寸，然后将其传递给高度？

Answer 1

CSS3 有两个全新的尺寸单位:vh( View 高度)和vw( View 宽度)，它们根据视口(viewport)的尺寸来调整元素的尺寸

html body { padding: 0; margin: 0; }

#main-nav-ul {
  width: 100vw;
  height: 100vh;
  background-color: blue;
}

<div id="main-nav-ul"></div>

Browser support is pretty decent , 但如果你需要支持旧版浏览器而不是经典的方法来实现这一点是这样的:

jQuery(function(){

  var resizeTimer;
  var $win = $(window);
  
  // This is where we scale the menu
  function resizeMenu(){
    $('#main-nav-ul').height($win.height());
  }
  
  // Bind a handler so that the menu resizes when viewport size changes
  $win.resize(function() {
    // This throttles the resize 
    // Very important for performance since window resize
    // can be fired hundreds of times while changing the
    // size of the window!
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeMenu, 250);
  });
  
  // Set the size of the menu initially.
  $win.trigger('resize');
});

#main-nav-ul { background-color: blue; color: #fff; }
html body { padding: 0; margin: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-nav-ul">Hello</div>