css - 如何设置子元素来填充父元素的溢出 :scroll height?

Question

我正在谈论的代码在 jsfiddle 上:http://jsfiddle.net/U6PX2/1/

对于以下 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;
}

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

我有一个滚动的 div。我希望垂直线在滚动的整个过程中都可见。

问题是 height: 100% 使用父元素的高度，它与内容的高度不匹配，因为它溢出了。

如何展开垂直线？

Answer 1

您希望垂直线在滚动的整个过程中都可见

然后您可以使用position:fixed 并将高度等于可见区域。像这样

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

Js Fiddle Demo