How can I set a child element to fill a parent's overflow:scroll height?

Question

The code I'm talking about is here on jsfiddle: http://jsfiddle.net/U6PX2/1/

For the following css:

.contentbox {
    margin-top: 100px;
    height: 200px;
    overflow-y: scroll;
    position: relative;
}

.vline {
    position: absolute;
    border-right: 2px solid #beeeef;
    height: 100%;
    left: 50%;
}

.message {
    position: relative;
    background-color: #ddd;
    font-size: 20px;
    margin: 20px;
}

And HTML

<div class="contentbox">
    <div class="vline"></div>
    <div class="message">
        The blue line should go all the way down
    </div>
    <div class="message">
        But it only displays on the visible portions
    </div>
    <div class="message">
        And doesn't extend to the overflow: scroll areas
    </div>
    <div class="message">
        Booga booga booga
    </div>
    <div class="message">
        Booga booga booga
    </div>
    <div class="message">
        Booga booga booga
    </div>
</div>

I have a scrolling div. I want the vertical line to be visible the entire time it's scrolling.

The problem is that height: 100% uses the parent element's height, which doesn't match the height of the content because it's overflowing.

How can I expand the vertical line?

Answer 1

You want to visible the vertical line to be visible entire time it's scrolling

Then you can use position:fixed and put the height equal to visible area. Like this

.vline {
    position: fixed;
    border-right: 2px solid #beeeef;
    height: 200px;
    left: 50%;
}

Js Fiddle Demo

Answer 2

I agree position:fixed is probably your best answer. But this would be a good case to use a :before class and clean up your HTML a bit.

html:

<div class="contentbox">
 //content 
</div>

css:

.contentbox:before {
    content: "";
    position: fixed;
    left: 50%;
    top:100px
    height: inherit;
    border-right: 2px solid #beeeef;
}

Answer 3

I face this problem too.In some degree,set fixed can solve it.But sometimes it's not a good idea,just when you need to change the position of your parent container it means you must modify this blue line's position in the meanwhile.

You can use background.Make the blue line a image but just one pixel and repeat in y axis.Use background position to adjust the position.