我正在开发一个项目，其中一个部分通过从数据库请求数据来填充元素，因此其中的元素数量变化很大。
棘手的部分是，我们的设计基于这样的想法：不必在页面上滚动，而是在必要时在部分上滚动。我想用overflow在这些部分就足够了，但它没有给我预期的结果。
我尝试了所有的变体overflow财产，scroll显示滚动条但它似乎被冻结。
我怎样才能使section-one本身可以滚动，而不使页面的其余部分可滚动？
我创建了一个带有虚拟版本的代码笔来演示该问题：http://codepen.io/leofontes/pen/aNaBox 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>
谢谢
对 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>
修订版代码笔 http://codepen.io/anon/pen/PNdbzm
Notes:
- 使用百分比高度时，父元素必须具有指定的高度。 https://stackoverflow.com/a/31728799/3597276
- 删除默认边距body元素。 https://stackoverflow.com/a/36219088/3597276
- 添加一个
height到该元素会导致overflow上班。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
