css – 如何使100%的高度?

前端之家收集整理的这篇文章主要介绍了css – 如何使100%的高度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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>填满其整个高度(不使用固定高度)?

解决方法

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

最简单的修复是为CSS表父区块提供一个高度值.
首先,对于ul,应用display:table而不是table-row,然后指定height:1px,任何非零值都可以工作.记住要清除边距和填充(由于ul默认设置).

确保CSS table-cell元素的高度为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>
原文链接:https://www.f2er.com/css/214267.html

猜你在找的CSS相关文章