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

Answer 2

我同意position:fixed可能是你最好的答案。但是，使用:before类并稍微清理HTML是一个很好的例子。

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

我也面临这个问题。在某种程度上，设置固定可以解决它。但有时它不是一个好主意，只是当你需要改变父容器的位置时，这意味着你必须修改这个蓝色在此期间线的位置。

您可以使用背景。将蓝线设为图像但只有一个像素，并在y轴上重复。使用背景位置调整位置。

如何设置子元素以填充父级溢出：滚动高度？

3 个答案: