html - 创建一个高度与另一个 div 匹配的 div

Question

标题有点乱，我解释一下。我想创建一个内容 div 区域，它在左侧的行上有一个小列，上面有行号，就像您在某种 IDE 或文本编辑器中看到的那样。

例如，查看此站点:http://codehearted.me/

您可以看到它在该主要内容部分显示了行号，并且它的高度与主要内容区域的高度相匹配。

我已经阅读了一些关于如何创建多个列以将所有列高度设置为最高列的内容，但这并不是我在这里所需要的。为了实现带有行号的列，我在该数字列 div 中放入了一堆数字，如下所示:

<div id="lineNumbers">
    <span>1</span>
    <span>2</span>
    <span>3</span>
        .
        .
        .
    <span>98</span>
    <span>99</span>
    <span>100</span>
</div>

这个示例网站似乎是这样实现的，但是当我尝试这样做时，它列出了 1-100 的所有数字并且使内容区域太高了。我希望 lineNumber 的高度与实际内容的 div 高度相匹配，而不是内容区域与 lineNumber 的高度相匹配，它以正确的方式在底部切掉其余数字。

任何关于如何实现这一目标的想法将不胜感激。谢谢，如果您需要任何其他信息，请告诉我。

Answer 1

将其绝对定位在 div 内，它正在编号。

风格:

.numbered {
    position: relative;
}
.lineNumbers {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30px; /* or something */
    overflow: hidden;
}
.numberedContent {
    padding-left: 30px; /* match .lineNumbers' width */
}

标记:

<div class="numbered">
    <div class="lineNumbers">
        <span>1</span>
        ...
        <span>100</span>
    </div>
    <div class="numberedContent">
        Whatever is in the other box.
    </div>
</div>

演示:

It's a Fiddle.