Html 将可变宽度div拉伸到可变高度父对象

我知道这是一个常见的问题，但仔细研究之后，所有指定的解决方案似乎都不起作用

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

下面是一个粗略绘制的最终想法示例：

请注意，左侧的数字可以是两位或三位数字。深灰色区域必须是单元格的整个高度

我开始认为，仅仅使用一张桌子是离开这里最简单的方法。也许是因为让灰色区域具有相同的宽度，不管最大的数量是多少

---

我是否错过了一种更好的（跨浏览器、非JS）方式？

如此简单的布局，绝对定位绝对是您的最佳选择，因此您走的方向是正确的。诀窍不是设置

高度：100%

（因为高度是可变的），而是设置

顶部：0；底部：0。此外，不需要为数字使用单独的div，只需使用伪元素即可-请参见以下代码段：


*{margin:0；padding:0；}
ul{字体系列：无衬线；列表样式：无；}
ul>li{位置：相对；最小高度：35px；边框：1px实心#000；填充：10px 10px 10px 45px；}
ul>li:before{位置：绝对；顶部：0；底部：0；左侧：0；宽度：40px；文本对齐：居中；背景：999；内容：attr（数据id）；颜色：fff；填充顶部：10px；}

Lorem ipsum dolor sit ame
位于ornare erat porttitor sit amet的无门相位。阿利奎姆·康格·阿利奎特·索利西图丁。杜伊斯·奥立帕特·梅特斯·泰勒斯，在奥立帕特·厄洛斯权杖馆。我们的选择是正确的，我们的选择是正确的，我们的观点是正确的
奥古斯自由前庭、阿库姆桑和埃蒂亚姆权杖前庭、爱欲浮雕前庭、选角前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。智者和智者的效率不高。位于矢状舌骨的隆库斯奥古斯教堂（Nunc rhoncus augue），nec posuere urna lobortis。这是一个很好的例子。你可以坐在那里。这是一种新的生活方式。Mauris vitae est调味品，sagittis metus vel，Pellentsque turpis
我看起来像一张桌子，除非你出于某种原因不能使用。真的吗？对我来说，它看起来像一个有序的列表。保利·D：可能是出于布局的目的，我对“表”这个词的普遍厌恶。但你是对的，它实际上是一张桌子，不是吗？只是觉得没有一个好的CSS方式来处理它很愚蠢。@Dan-有一个好的CSS方式来处理它。实际上你几乎做到了——绝对定位是这个布局的正确方法。啊，我可能应该选择不同的数字。这些数字是ID，可以是非顺序的。还有，那里仍然有固定宽度。然后使用一个带有数据属性的
UL
，它仍然允许你使用
伪元素
（更新的答案）@Dan-关于固定宽度-你希望它们是固定宽度，如果它们不是，并且它们堆叠在一起，布局看起来会非常有趣。很好，很彻底，谢谢你。看起来我很接近，但是绕着答案瞎转。