不使用百分比 TOP 值的固定高度 DIV答案

【问题标题】：Fixed-height DIVs not using percentage-TOP values不使用百分比 TOP 值的固定高度 DIV
【发布时间】：2017-05-01 16:43:35
【问题描述】：

我正在编写一个 Javascript 工具（不是浏览器插件）以在页面加载时自动以各种颜色突出显示关键字，并且在页面滚动条旁边创建“突出显示栏”以显示每个结果的位置时遇到问题。

到目前为止，我生成的 HTML 代码如下所示：

<div class="highlight-bar" style="position: fixed; top: 0px; bottom: 0px; right: 0px; width: 8px; border-left: 1px solid black; background-color: grey;">
    <div class="highlight-tick" style="width: 100%; height: 2px; top: 40%; left: 0px;" />
    <div class="highlight-tick" style="width: 100%; height: 2px; top: 55%; left: 0px;" />
</div>

请注意，我在运行时生成样式数据，并且没有任何影响这些元素的 CSS 规则。是的，我检查了 3 次。

现在，“滴答声”甚至都没有出现，而是挂在容器的顶部。

是的，我已经尝试在这里找到答案，但似乎没有一个以允许容器随浏览器窗口缩放的方式涵盖这种情况。

【问题讨论】：

标签： html css percentage

【解决方案1】：

将position: absolute; 添加到.highlight-tick

为了便于查看，我添加了背景颜色并将刻度加粗。

<div class="highlight-bar" style="position: fixed; top: 0px; bottom: 0px; right: 0px; width: 8px; border-left: 1px solid black; background-color: grey;">
    <div class="highlight-tick" style="position: absolute; width: 100%; height: 10px; top: 40%; left: 0px;background: blue;" />
    <div class="highlight-tick" style="position: absolute; width: 100%; height: 10px; top: 55%; left: 0px;background: red;" />
</div>

【讨论】：