css 子元素增长到溢出高度

3z6pesqy  于 2023-05-19  发布在  其他
关注(0)|答案(4)|浏览(230)

请考虑以下情况。我有一个溢出的自动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布局。

css

4条答案

按热度按时间
zzoitvuj

zzoitvuj1#

当前结构的问题是a的高度固定在80vh，而b的高度是a的100%，这也意味着80vh。
如果您愿意稍微修改HTML，可以通过允许a的高度为auto（默认）并将a Package 在具有溢出滚动的固定高度的容器元素中来解决这个问题。这样，a的高度将是内容的完整高度，b的高度也将是内容的完整高度。
下面是一个例子：

.container {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.a {
  position: relative;
}

.b {
  height: 100%;
  position: absolute;
  top: 0;
  width: 10px;
  background: red;
}
<div class="container">
  <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>
</div>
赞(0）分享  回复(0）举报  2023-05-19
dnph8jn4

dnph8jn42#

一种可能的方法是使用网格并设置grid-row，参见下面的示例，现在不需要重构

.a {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.b {
  position: absolute;
  grid-row: 1/1;
  height: 100%;
  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>

当然，如果你的div中不只是“test test test”，而是包含其他html元素的实际内容，这将破坏网格，那么这是一个坏主意。“安全”解决方案需要添加一个 Package 器div（原始解决方案发布，在问题被更改之前）

.a {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.t {
  grid-row: 1/1;
  grid-column: 1/1;
}

.b {
  grid-row: 1/1;
  grid-column: 1/1;
  height: 100%;
  width: 10px;
  background: red;
}
<div class="a">
  <div class="t">
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 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>
  <div class="b"></div>
</div>
赞(0）分享  回复(0）举报  2023-05-19
a5g8bdjr

a5g8bdjr3#

将min-height:100%添加到div并设置height:auto。这将拉伸你的颜色到最大高度，但也会随着你的文字超过100%的高度而增长。

赞(0）分享  回复(0）举报  2023-05-19
nimxete2

nimxete24#

这是一个粘滞位置的想法，但只有当你知道height的值时才有效，因为你需要它来处理margin-top

.a {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
  position: relative;
}

.b {
  height: 100%;
  margin-top: -80vh; /* you need the opposite of height here */
  position: sticky; 
  bottom: 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>
赞(0）分享  回复(0）举报  2023-05-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com