CSS:列表项中的 anchor 不会保持 100% 高度

Question

所以，这是瘦...

我有a page that has a list as display:table-cell .随着浏览器宽度的调整，列表的内容( anchor )可能会换行到 2 行。问题是不换行到 2 行的 anchor 不会保持 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%;} .但是，然后， anchor 不保留填充。所以，只需设置 li {height:160px;}或者其他的东西。但是， anchor 不是垂直居中的。所以，只需设置 li {line-height:160px;} .但是，当它换行到 2 行时， anchor 是巨大的。

那么，男人应该做什么？

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

张杰

编辑...

为后代包含 HTML...

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

张杰

编辑 2...

anchor 背景颜色没有增长到其父级的整个高度。

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

张杰

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: relative 没有为表格单元格定义(参见:Using Position Relative/Absolute within a TD?)。

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

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