可滚动的子级和父级不可滚动

Question

让我们说这样的事情：

<div class="parent">
 <div class="child">
 </div>
</div>

如何使parent占据整个屏幕高度？

以及如果child的高度超过父级高度（即屏幕的最大高度），如何使之滚动。

我尝试过这样的事情：

.parent{
  height: 100vh;
 }

.child{
 overflow: auto;
 }

Answer 1

将溢出规则应用于父div，请参见下面的工作示例：

html, body {
 height: 100%;
 margin: 0;
 font-family: sans-serif;
}
.parent {
  overflow: auto;
  height: 100vh;
  padding: 10px;
  border: 1px solid #ccc;
}
.child span {
  height: 100vh;
  display: block;
  background: gray;
  padding: 10px
}

.child span:nth-child(odd) {
  background: lightgray
}

<div class="parent">
 <div class="child">
  <span>Child container 1</span>
  <span>Child container 2</span>
  <span>Child container 3</span>
 </div>
</div>

Answer 2

尝试使用以下CSS代替您的CSS：

html, body{
  overflow:hidden;
}
.parent{
  height: 100vh;
  overflow: scroll;
 }

Here是支持该小提琴的链接。

html,
body {
  overflow: hidden;
}

.parent {
  height: 100vh;
  overflow: scroll;
}

<div class="parent">
  <div class="child">


    "Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit
    amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing
    elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum
    dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet,
    consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing
    elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum
    dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet,
    consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing
    elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit" "Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum
    dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit"
  </div>
</div>