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

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>

修订代码笔

笔记：

1. 使用百分比高度时，父元素必须具有指定的高度。
2. 从body元素中删除默认边距。
3. 向height元素添加 a会导致overflow工作。