将可变宽度div拉伸到可变高度父级

Question

我知道这是一个常见的问题，但在仔细观察后，没有一个指定的解决方案似乎有效。

我最接近的是使用position：absolute，并设置100％height。但这会导致一个问题，即100％高的div具有可变宽度，因此我无法对其余内容应用填充以将其从绝对定位的元素后​​面移出。

这是最后一个想法的粗略示例：

请注意，左侧的数字可能是两位或三位数。深灰色区域必须是细胞的整个高度。

我开始认为只使用桌子是最简单的方法。无论最大数量是多少，也许可以使灰色区域具有相同的宽度。

我错过了一个更好的（跨浏览器，非JS）方式吗？

Answer 1

凭借如此简单的布局，绝对定位绝对是您最好的选择，因此您走在正确的轨道上。诀窍不是设置height:100%（因为高度是可变的），而是设置top:0;bottom:0;。此外，您不需要为数字使用单独的div，您只需使用伪元素 - 请参阅下面的代码段：

* { margin:0; padding:0; }
ul { font-family: sans-serif; list-style:none;}
ul>li { position: relative; min-height: 35px; border: 1px solid #000; padding: 10px 10px 10px 45px;}
ul>li:before { position: absolute; top:0; bottom:0; left:0; width: 40px; text-align: center; background: #999; content: attr(data-id); color: #fff; padding-top: 10px;}

<ul>
  <li data-id="1">Lorem ipsum dolor sit ame</li>
  <li data-id="37">Phasellus porta nulla urna, at ornare erat porttitor sit amet. Aliquam congue quam et aliquet sollicitudin. Duis volutpat metus tellus, at volutpat eros scelerisque non. Praesent metus lectus, malesuada eget metus vel, euismod dictum ex.</li>
  <li data-id="12">Vestibulum ultrices augue libero, vitae sodales mi accumsan et. Etiam scelerisque, eros sed faucibus sollicitudin, lectus orci tincidunt sem, eu dapibus dui ante nec tortor. Nullam efficitur sapien et dolor aliquet bibendum. Nunc rhoncus augue at ligula sagittis, nec posuere urna lobortis. Nunc faucibus ipsum dolor, nec egestas nunc dapibus nec. Quisque sit amet suscipit est. Quisque sollicitudin tempus tincidunt. Mauris vitae est condimentum, sagittis metus vel, pellentesque turpis.</li>
</ul>

修改

这是使用非固定宽度（并使用display: table并仍使用伪元素）的方法。我仍然会选择position: absolute方式，因为我认为布局看起来更好，但现在是这样。在CSS中，大约有一千种方法可以给猫皮肤。

    * { margin:0; padding:0; }
    ul { font-family: sans-serif; list-style:none;}
    ul>li { display: table; position: relative; border: 1px solid #000; width: 100%;}
    ul>li>div { display: table-cell;padding: 10px; }
    ul>li:before { display: table-cell; padding: 10px; text-align: center; background: #999; content: attr(data-id); color: #fff; padding-top: 10px;}

<ul>
 <li data-id="1"><div>Lorem ipsum dolor sit ame</div></li>
 <li data-id="37"><div>Phasellus porta nulla urna, at ornare erat porttitor sit amet. Aliquam congue quam et aliquet sollicitudin. Duis volutpat metus tellus, at volutpat eros scelerisque non. Praesent metus lectus, malesuada eget metus vel, euismod dictum ex.</div></li>
 <li data-id="12"><div>Vestibulum ultrices augue libero, vitae sodales mi accumsan et. Etiam scelerisque, eros sed faucibus sollicitudin, lectus orci tincidunt sem, eu dapibus dui ante nec tortor. Nullam efficitur sapien et dolor aliquet bibendum. Nunc rhoncus augue at ligula sagittis, nec posuere urna lobortis. Nunc faucibus ipsum dolor, nec egestas nunc dapibus nec. Quisque sit amet suscipit est. Quisque sollicitudin tempus tincidunt. Mauris vitae est condimentum, sagittis metus vel, pellentesque turpis.</div></li>
</ul>