html - 响应式菜单， 高度 100%

Question

我正在研究响应式导航。它的宽度是浏览器窗口的 100%。计算它的高度，使得其中的 6 个 anchor 是正方形。我设法用“dummy-div”和 padding-top 技巧设置了 div 的高度。我的下一个问题是设置容器填充的 anchor 高度。我真的想要修复菜单。因为我希望链接是正方形，所以我不能使用绝对值。

HTML 看起来像这样:

<div class="menu">
  <div class="dummy"></div>
  <a href="#">Link 1</a>
        .....
  <a href="#">Link 6</a>
</div>

这是我的 CSS 的相关片段:

    .menu {
         top:0;
         bottom:0;
         width: 100%;
         position: fixed;
      }

    .menu .dummy {
         float: left;
         padding-top: 20%;
      }

    .menu a {
         display: inline-block;
         position: relative;
         width: 20%;
         height: 100%;
      }

我的盒子的宽度工作得很好，但我在高度上苦苦挣扎。我做错了什么？

Answer 1

不确定您要用 <div class="dummy"></div> 做什么所以我已经删除了它。如果您希望 6 个菜单项为正方形，请使用填充来创建形状:

.menu a {
    width: 15.666666667%;       /* (100/6)-1% */
    margin:0 .5%;               /* that 1% applied as margins left & right */
    padding:8.333333334% 0;     /* (100/6)/2 applied as padding top & bottom */
    line-height:0;              /* make sure text has no height */

    float:left;
    background:#303030;
    text-align:center;
    color:#fff;
}

http://jsfiddle.net/duncan/wazGx/