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>

导航移动下拉菜单，使屏幕大小

1 个答案: