Navigation Mobile 下拉菜单，调整屏幕大小

Question

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

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

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

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

Answer 1

CSS3 有两个全新的尺寸单位：vh（视图高度）和vw（视图宽度），元素的大小相对于视口的大小

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>