使导航全高

Question

如何才能使此测试站点上的导航达到深灰色条（标题）的整个高度，并垂直居中？ http://website-test-lab.com/sites/mfm/

您可以看到主页链接的红色背景并没有填充深灰色条区域的高度。 包含菜单的网站是响应式的。

编辑：对缺少代码示例表示歉意，但是这里涉及的 CSS 太多，或者例如 jsfiddle。如果您可以使用开发工具/Firebug，将不胜感激。

谢谢。

HTML：

<header id="masthead" class="header clearfix" role="banner">

<!-- logo -->
  <div class="logo grid-15 tablet-grid-15">
   <a href="#">
    <img src="#/library/img/mfmlogo.jpg" alt="#" class="logo-img">
   </a>
  </div>
<!-- /logo -->

<!-- nav -->
  <nav id="header-menu" class="nav grid-85 tablet-grid-85" role="navigation">
    <ul class="nav-list clearfix">
      <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-32 current_page_item menu-item-46"><a href="http://website-test-lab.com/sites/mfm/">Home</a></li>
      <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://website-test-lab.com/sites/mfm/about-us/">About Us</a></li>
</ul>
  </nav>
<!-- /nav -->

</header>

CSS：

#masthead {
    margin: 15px 0 0 0;
    background: #363737;
    position: relative;
    display: block;
}

.logo {
    padding: 10px;
}

Answer 1

将 .nav 的 margin-top 设置为 #masthead .nav{ margin-top:0px; }

并设置填充，如 #masthead .nav ul li a{ padding:31px 15px; }