html - 将可变宽度的 div 拉伸(stretch)到可变高度的父级

Question

我知道这是一个常见问题，但仔细查看后发现，指定的解决方案似乎都不起作用。

我最接近的是使用 position: absolute 并设置 100% 高度。但这会导致一个问题，即要设置为 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>