只让一个部分可滚动，而不是整个页面

Question

我正在开展一个项目，其中一个部分通过从数据库请求数据来填充元素，因此其中的元素数量非常可变。

棘手的部分是我们的设计是基于不必滚动页面的想法，而是在必要时滚动部分。我认为在这些部分上使用 overflow 就足够了，但它并没有给我预期的结果。

我尝试了overflow 属性的所有变体，scroll 显示一个滚动条，但它似乎被冻结了。

如何使section-one 自身可滚动，而不使页面的其余部分可滚动？

我创建了一个带有虚拟版本的代码笔来演示该问题：http://codepen.io/leofontes/pen/aNaBox

body {
  overflow: hidden;
}

main {
  margin: 0;
  width: 100%;
  height: 100%;
}

.section-one {
  background-color: #FF0000;
  float: left;
  min-height: 1400px;
  overflow: visible;
  width: 15%;
}

.section-two {
  background-color: #00FF00;
  float: left;
  min-height: 1400px;
  width: 70%;
}

.section-three {
  background-color: #0000FF;
  min-height: 1400px;
  float: left;
  width: 15%;
}

<main>
  <section class="section-one">
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
  </section>
  <section class="section-two">
    <p>this is section two</p>
  </section>
  <section class="section-three">
    <p>this is section three</p>
  </section>
</main>

谢谢

Answer 1

对您的 CSS 进行以下调整：

html {
  height: 100%;                       /* note #1 */
}
body {
  height: 100%;                       /* note #1 */
  margin: 0;                          /* note #2 */
  overflow: hidden;
}
main {
  margin: 0;
  height: 100%;
}
.section-one {
  background-color: #FF0000;
  float: left;
  overflow-y: auto;                  /* new */
  width: 15%;
  height: 100%;                      /* note #3 */
}
.section-two {
  background-color: #00FF00;
  float: left;
  min-height: 1400px;
  width: 70%;
}
.section-three {
  background-color: #0000FF;
  min-height: 1400px;
  float: left;
  width: 15%;
}

<main>
  <section class="section-one">
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
  </section>
  <section class="section-two">
    <p>this is section two</p>
  </section>
  <section class="section-three">
    <p>this is section three</p>
  </section>

</main>

Revised Codepen

注意事项：

1. When using percentage heights, parent elements must have a specified height.
2. Remove the default margin from the body element.
3. 向元素添加height 会使overflow 起作用。