只有一个部分可滚动,而不是整个页面

时间:2016-04-25 17:45:48

标签: html css html5 overflow

我正在开发一个项目,其中一个部分通过从数据库请求数据来填充元素,因此其中的元素数量极其多变。

棘手的部分是我们的设计基于不必在页面上滚动的想法,而是在必要时滚动部分。我认为在这些部分上使用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>

谢谢

1 个答案:

答案 0 :(得分:4)

对CSS进行这些调整:

&#13;
&#13;
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%;
}
&#13;
<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>
&#13;
&#13;
&#13;

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生效。