请考虑以下情况。我有一个溢出的自动div,其内容超出了其高度。然后,我有一个绝对位置div(红色背景),我想运行整个高度的可滚动的div。换句话说,我希望它延伸到文本停止的底部,但现在它只在最初可见的文本底部停止。换句话说,红色div(.B)如何延伸到滚动距离的底部。我可以用CSS做这个吗?
.a {
height: 80vh;
width: 200px;
overflow-y: auto;
position: relative;
}
.b {
height: 100%;
position: absolute;
top: 0;
width: 10px;
background: red;
}
<div class="a">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
<div class="b"></div>
</div>
理想的解决方案是只使用CSS,而不依赖于重构HTML布局。
4条答案
按热度按时间zzoitvuj1#
当前结构的问题是
a
的高度固定在80vh
,而b
的高度是a
的100%
,这也意味着80vh
。如果您愿意稍微修改HTML,可以通过允许
a
的高度为auto(默认)并将a
Package 在具有溢出滚动的固定高度的容器元素中来解决这个问题。这样,a
的高度将是内容的完整高度,b
的高度也将是内容的完整高度。下面是一个例子:
dnph8jn42#
一种可能的方法是使用网格并设置grid-row,参见下面的示例,现在不需要重构
当然,如果你的div中不只是“test test test”,而是包含其他html元素的实际内容,这将破坏网格,那么这是一个坏主意。“安全”解决方案需要添加一个 Package 器div(原始解决方案发布,在问题被更改之前)
a5g8bdjr3#
将
min-height:100%
添加到div并设置height:auto
。这将拉伸你的颜色到最大高度,但也会随着你的文字超过100%的高度而增长。nimxete24#
这是一个粘滞位置的想法,但只有当你知道height的值时才有效,因为你需要它来处理
margin-top