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

Answer 2

只需从#child元素中移除位置绝对，然后将其min-height: 100%;代替height: 100%;，然后添加overflow: hidden;。查看working demo

Answer 3

@samfox你想要在child上使用position绝对创建什么？如果你只想使用css那么你需要添加一个html部分，它只保存容器id {{3}的宽度高度和溢出y并且无需更改任何html css，只需简单的1行jquery即可解决您的问题HTML FIDDLE

HTML解决方案 -

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: sans-serif;
}

#holder {
  width: 80%;
  height: 80%;
  overflow-y: auto;
}

#container {
  position: relative;
  background-color: lightgrey;
}

#child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 50px;
  background-color: lightcoral;
}

<div id="holder">

 <div id="container">
  <div id="child"></div>
    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>
     </div>
</div>

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

3 个答案: