CODEWITHSUNDEEP
htmlcsspercentage
Raceimaztion
Raceimaztion

Reputation: 9644

Fixed-height DIVs not using percentage-TOP values

I'm writing a Javascript tool (not browser add-on) to highlight keywords in various colours automatically on page-load, and am having problems creating a "highlight bar" beside the page's scrollbar to show where each result is.

My resulting HTML code looks like this so far:

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

Note that I'm generating the style data at run-time and don't have any CSS rules that affect these elements. And yes, I've checked three times.

Right now, the "ticks" aren't even showing up, and are instead hanging out at the top of their container.

And yes, I have tried to find an answer on here already, but none of them seem to cover this case in a way that allows the container to scale with the browser window.

Upvotes: 0

Views: 35

Answers (1)

norcal johnny
norcal johnny

Reputation: 2115

Add a position: absolute; to .highlight-tick

I added a background-color and made the tick thicker for viewing purposes.

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

Upvotes: 2

Related Questions