Javascript 动态高度可滚动DIV内的全高度元素

问题

我有两个DIV元素：#container和#child。#容器是可滚动的，#子容器必须达到#容器的全部高度。但是#孩子并没有占据#容器的全部高度。请注意#容器具有动态高度，因此#子容器始终必须使用相同的高度

问题已显示出来

---

实际上我有一个很好的JavaScript解决方案。但有人知道一个体面的CSS唯一的解决方案吗？会简单得多。

您可以添加一个额外的容器，请查看：

HTML:

---

只需从

#child

元素中移除位置绝对，并将其赋予

最小高度：100%而不是
高度：100%
和add
溢出：隐藏。检查samfox使用position absolute on child实际要创建什么？如果您只想使用css，那么您需要添加一个html部分，它只保留容器id的宽度、高度和溢出y，而不更改任何html css，简单的一行jquery就可以解决您的问题

HTML解决方案--
html，
身体{
身高：100%；
}
身体{
保证金：0；
字体系列：无衬线；
}
#持有者{
宽度：80%；
身高：80%；
溢出y：自动；
}
#容器{
位置：相对位置；
背景颜色：浅灰色；
}
#孩子{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：0自动；
宽度：50px；
背景颜色：浅珊瑚；
}

正文

文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本

什么决定了父对象的“高度”？为什么在示例中要将子对象和容器分开？你可以把背景放在容器上，忘记你的孩子？或者你想要两个孩子，一个是红色条，另一个是文本？可能是重复的@Dave，而不是重复的-这是想让绝对定位的孩子展开它的父-这是想让孩子展开到树的整个高度parent@samfox这个怎么样？如您所见，孩子滚动的内容（与下面的答案不同）不太好，因为当他在
#child
中添加更多文本时，
#child
没有滚动。
#child
内容是否应可滚动？或者你想让
#child
像文本一样滚动？添加的容器的目的是使用.container滚动条来保存内容，使用#child显示条。实际上我不需要在#child中添加任何内容，但我通常不喜欢添加内部div。无论如何，谢谢你的解决方案，这是一个好主意。我的目标是不使用任何额外的HTML标记，也不使用JavaScript。只是简单的HTML和CSS。而JQuery单线解决方案仅在重新加载页面时有效。如果动态添加一些行，那么代码将无法工作。我已经发布了一个不错的JavaScript解决方案。是的，我看到了js。但是使用css，如果你想保持这个高度，你需要添加html。。否则，溢出部分将随body一起出现。我只是希望有人能有一个CSS专用的解决方案，但正如您所说，目前可能没有解决方案。
<div id="container">
  <div id="child"></div>
</div>

<div id="container">
  <div class="container-scroller">
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT
  </div>
  <div id="child"></div>
</div>

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: sans-serif;
}

#container {
  position: relative;
  width: 80%;
  height: 80%;
  background-color: lightgrey;
}

.container-scroller {
  height: 100%;
  overflow-y: scroll;
}

#child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 50px;
  background-color: lightcoral;
  height: 100%;
}