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

Question

问题

我有两个 DIV 元素:#container 和#child。 #container 是可滚动的，#child 必须占据#container 的整个高度。然而#child 并没有占据#container 的全部高度。请注意，#container 具有动态高度，因此 #child 始终必须使用相同的高度。

问题显示HERE (JSFiddle) .

<div id="container">
  <div id="child"></div>
</div>

html, body {
  height: 100%;
}

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

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

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

我实际上有一个很好的 JavaScript 解决方案来解决这个 HERE (JSFiddle) .但是有人知道一个像样的纯 CSS 解决方案吗？会简单得多。

Answer 1

您可以添加一个额外的容器，查看 jsfiddle :

HTML:

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

CSS:

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%;
}