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

我正在寫一個JavaScript工具（不是瀏覽器插件），以在頁面加載時自動突出顯示各種顏色的關鍵字，並且在創建「高亮欄」旁邊時遇到問題該頁面的滾動條顯示每個結果的位置。不使用百分比TOP值的固定高度DIV

我生成的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規則。是的，我已經檢查了三次。

現在，「蜱蟲」甚至沒有出現，而是掛在他們的容器頂部。

是的，我已經試過在這裏找到答案，但他們似乎都沒有涵蓋這種情況下允許容器與瀏覽器窗口擴展的方式。

來源

2016-12-15 Raceimaztion

添加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>

來源

2016-12-16 00:13:11

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

回答

相關問題