响应式菜单，<a>高度100％

Question

我正在开发响应式导航。它的宽度是浏览器窗口的100％。计算其高度，使其中的6个锚点为正方形。我设法用div-div和padding-top技巧来设置div的高度。我的下一个问题是设置容器填充的锚高度。我真的希望菜单得到修复。 正如我想要的链接是正方形，我不能使用绝对值。

的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/

Answer 2

只需添加锚标记内一个div。

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

现在，你可以通过CSS指定DIV的高度

.menu a div{ 
height:50px; width:100px; 
}