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

Question

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

到目前为止，我生成的 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 规则。是的，我检查了三遍。

现在，"ticks" 甚至没有出现，而是挂在容器的顶部。

是的，我已经尝试在这里找到答案，但其中 none 似乎以一种允许容器随浏览器扩展的方式涵盖了这种情况 window。

Answer 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>

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

Fixed-height DIVs not using percentage-TOP values

html

css

percentage