如何制作<a> 100% height of <li>?</li></a>

Question

ul {
    display: table-row;
}
    
li {
    width: 100px;
    border: 1px solid black;
    display: table-cell;
}

a {
    display: block;
    background-color: yellow;
    height: 100%;
}

<ul>
    <li>
        <a href="#">Test</a>
    </li>
    <li>
        Test  
        Test
        Test
        Test            
    </li>
</ul>

This answer解释了如何使<li>具有相同的高度，但现在如何让<a>填充li的整个高度（不使用固定的{{1}}高度）？

Answer 1

使用inline-block而不是block。您现在还需要设置width。

ul {
  display: table-row;
  height: 0;
}

li {
  width: 100px;
  border: 1px solid black;
  display: table-cell;
  height: 100%;
}

a {
  display: inline-block;
  background-color: yellow;
  height: 100%;
  width: 100%;
}

<ul>
  <li>
    <a href="#">Test</a>
  </li>
  <li>
    Test Test Test Test
  </li>
</ul>

Answer 2

您正在处理表格，并且在计算表格和表格单元格高度时，表格高度值将用作最小值。

最简单的解决方法是为CSS表父块提供高度值。 首先，向ul申请display: table而不是表格行，然后指定height: 1px，任何非零值都可以。请记住将边距和填充清零（由于ul默认设置）。

确保CSS table-cell元素具有height: 100%，然后a元素将占据高度（因为它显示为块）。

注意：如果您将顶级高度设置为100％，这将在Chrome中有效，但在IE中失败。

ul {
  display: table;
  height: 1px; /* any small value will work */
  margin: 0;
  padding: 0;
}
li {
  width: 100px;
  border: 1px solid black;
  display: table-cell;
  height: 100%;
}
a {
  display: block;
  background-color: yellow;
  height: 100%;
}

<ul>
  <li>
    <a href="#">Test</a>
  </li>
  <li>
    Test Test Test Test
  </li>
</ul>

Answer 3

为了做以下工作......

a {
    height: 100px;
}

...父母必须具有非自动高度。例如，

li {
    height: 100%;
}

......爷爷也一样：

ul {
    height: 0;
}

使用height: 0可能看起来有点奇怪。但请注意，由于ul是一个表格行，因此只有最小高度。

＆＃13;

＆＃13;

ul {
  display: table-row;
  height: 0;
}
li {
  width: 100px;
  border: 1px solid black;
  display: table-cell;
  height: 100%;
}
a {
  display: block;
  background-color: yellow;
  height: 100%;
}

＆＃13;

<ul>
  <li>
    <a href="#">Test</a>
  </li>
  <li>
    Test Test Test Test
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

但是，Chrome似乎可能要求ul成为一个表而不是一个表行。

＆＃13;

＆＃13;

ul {
  display: table;
  height: 0;
  padding: 0;
}
li {
  width: 100px;
  border: 1px solid black;
  display: table-cell;
  height: 100%;
}
a {
  display: block;
  background-color: yellow;
  height: 100%;
}

＆＃13;

<ul>
  <li>
    <a href="#">Test</a>
  </li>
  <li>
    Test Test Test Test
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;