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

Question

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

3

标题有点令人困惑，让我解释一下。我想创建一个具有左边小列，其中包含行号的内容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的所有数字，并使内容区域过高。我希望行号的高度与真实内容的div高度匹配，在正确的方式下截断底部的其余数字。如果您有任何想法如何实现这一点，将不胜感激。谢谢，如果您需要任何其他信息，请告诉我。

- Isaiah Lee

假设您的示例中的div有一个父div，您可以将该父容器设置为固定高度，并使用CSS隐藏lineNumbers div的溢出部分。 - fnostro

如果仅仅是为了美观而类似你提到的网站，而且文本对其没有实际影响，那么就使用背景图像并填充容器的左侧。如果这些数字应该是真正的行号，那么每个数字都应该与一行相关联，而不是放在单独的容器中。 - Joseph Marikle

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- calvin · Accepted Answer

请将其绝对定位在编号所在的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>

演示:

这是一个Fiddle。

（注：Fiddle是一个在线的代码编辑器和调试工具）