CSS：列表项目中的锚点不会保持100％的高度

Question

所以，这是瘦弱的......

我有a page that has a list as display:table-cell。随着浏览器的宽度调整，列表的内容（锚点）可以换行为2行。问题是没有包裹到2行的锚点没有保持100％的高度。

... CSS

.home .pushes ul {display:table;}
.home .pushes ul li {display:table-cell; vertical-align:middle; width:25%; background-color:#e5a015; color:#ffffff;}
.home .pushes ul li a {display:block; padding:4em 0; padding:4rem 0;}

因此，<li>的高度应由<a>的高度和填充确定。但是，因为它是<display:table-cell>，所以高度由最高的<a>确定。

好的，所以只需设置a {height:100%;}即可。但是，然后，锚没有保持填充。所以，只需设置li {height:160px;}或其他东西。但是，锚点不是垂直居中的。所以，只需设置li {line-height:160px;}即可。但是，当它包裹到2行时，锚点很大。

那么，一个人要做什么？

我可以做li {display:inline-block;}。但我希望所有的盒子都高度相同。

JJ

编辑...

包含后代的HTML ......

<ul>
    <li>bleh</li>
    <li>bleh</li>
</ul>

JJ

编辑2 ...

锚背景颜色不会增加其父级的整个高度。

我没有意识到我可以上传图片。谢谢你的提示。

JJ

Answer 1

解决此问题的最佳方法是使用position：relative和position：absolute。

示例：

li {
  position: relative;
}

li a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

但是，上面的说法不起作用，因为你的li正在使用“display：table-cell;”和position：没有为表格单元格定义相对（参见：Using Position Relative/Absolute within a TD?）。

因此，您唯一的选择是使用Javascript来完成此操作。有很多解决方案，但这里有一个：

使用jQuery resize方法（http://api.jquery.com/resize/）跟踪窗口调整大小的时间。当窗口调整大小时，修改锚标记的填充，使其继续覆盖整个空间。