仅制作一个部分可滚动，而不是整个页面

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工作。