发生的问题是该网站包含两个不同的滚动条，一个用于内部垂直显示，其中包含90多个项目，但最多可以容纳200多个项目，然后进行页面滚动。当您向下滚动菜单时，它将滚动，但是在特定点之后，滚动条消失，然后整个页面向下滚动以查看列表中的其余项目。 我已经研究了这个JSFiddle，但不确定如何正确实现这一点。
垂直菜单为height: 800px;，但我尝试将其设置为高度的80％或height: 500px;，但都没有解决此问题。
此fiddle很好地演示了当我使用侧栏滚动时发生的情况。
答案 0 :(得分：0)
默认情况下，body上有一个空白，可以创建通常不需要的空白。这种情况下的空白是增加一些空间，导致页面比预期的要大，因此增加了额外的滚动条。
在下面的示例中，我已经完成
：margin: 0px以删除此多余的空格
#content,
html,
body {
height: 100%;
margin: 0;
}
#content {
padding: 10px;
box-sizing: border-box;
}
#left {
float: left;
width: 50%;
background: red;
height: 100%;
overflow: scroll;
}
#right {
float: left;
width: 50%;
background: blue;
height: 100%;
overflow: scroll;
}<div id="content">
<div id="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec lorem mauris. Nulla fermentum tincidunt nulla et dignissim. In porttitor sem id velit lobortis aliquam. Duis et purus ac orci porttitor luctus at quis leo. Mauris vulputate pellentesque
est, sit amet egestas tellus facilisis sit amet. Cras sodales bibendum tellus, a gravida tortor hendrerit sed. Pellentesque blandit posuere nisl, sit amet cursus nisl dignissim non. Vivamus at orci sit amet elit lacinia posuere sit amet malesuada
elit. Duis quis luctus magna. Phasellus pharetra urna a dolor vulputate ultrices. Nam ornare orci justo, et fringilla lacus. Etiam tristique enim sed enim tempus tincidunt. Fusce rutrum dui at erat iaculis suscipit. Aenean id urna sit amet arcu pulvinar
accumsan. Aenean malesuada, nisi sed ultricies tempus, elit nisl interdum leo, sit amet bibendum eros arcu pretium nisi. Nam magna dolor, lacinia adipiscing iaculis ac, viverra sit amet ligula. Fusce vitae est sit amet ipsum iaculis molestie a ac
nisi. Curabitur porta nunc quis magna interdum nec hendrerit ligula suscipit. Curabitur non accumsan sapien. Donec non ligula a lorem lobortis scelerisque ac a sem. Sed porta blandit odio a ullamcorper. Mauris in suscipit quam. Duis sit amet ipsum
purus. Donec sed nunc lacus. Cras mattis felis quis lacus ultrices pharetra tristique nibh venenatis. In id eros sed libero iaculis commodo quis vitae neque. Nulla gravida neque in tortor congue id mattis massa auctor. Cras auctor tincidunt ipsum,
in suscipit risus iaculis sed. Nulla at eros nec urna auctor tincidunt eu ac diam. Aenean nulla metus, accumsan eu dignissim vitae, congue sed nisl. Pellentesque ut nunc eget metus malesuada vulputate ac aliquam nibh. Pellentesque felis erat, tristique
nec semper vel, dignissim ut nisl. Donec ac dui purus. Nunc in ligula lacus. In vehicula scelerisque convallis. Ut in ornare ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam et libero a nibh venenatis
tristique vitae vitae ligula. Phasellus vitae tempor ante. Proin egestas commodo enim. Curabitur eu justo non felis tempus fermentum ut vitae augue. Ut cursus ultrices metus eu vehicula. Praesent sem nulla, eleifend eget adipiscing a, tempor sit amet
lectus. Suspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero
faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie tincidunt. Sed congue mauris non ante pharetra eu facilisis velit rhoncus. Aenean dictum purus sit amet tortor ultricies auctor. Aliquam nunc quam, porttitor porta fringilla et,
bibendum sit amet urna. Vestibulum id tellus sed ipsum dignissim pharetra. Quisque non ipsum nec mauris ullamcorper interdum non et velit. Fusce lorem leo, molestie nec ultricies a, vulputate a ante. Aenean vel mauris libero, sit amet tempor sapien.
Suspendisse vel purus sit amet nunc placerat suscipit tincidunt et arcu. Donec sit amet magna diam. Nam a lacus libero. Proin vitae lectus at lorem rhoncus aliquet ut ut ligula. Nam ante dui, placerat quis fermentum quis, eleifend ac justo. Morbi
gravida urna eu risus scelerisque id tempus leo adipiscing. Morbi vel libero eu felis congue venenatis sed eget tellus. Ut metus libero, auctor sed congue eu, fringilla vel purus. Donec urna lorem, congue ac dapibus in, sollicitudin id nunc. Sed ullamcorper,
nibh imperdiet ullamcorper ultrices, tortor leo elementum elit, sit amet auctor lectus justo et sem. Pellentesque sit amet erat sed orci ultricies rutrum sed eget est. Aenean quis elit arcu, ac rhoncus magna. Suspendisse eu magna vitae ligula porta
condimentum sit amet et lacus. Donec at varius erat. Curabitur semper dapibus lorem ac faucibus. Praesent ornare vehicula nisi in fermentum. Curabitur viverra lectus in odio dictum sed imperdiet magna vulputate. In hac habitasse platea dictumst. Suspendisse
potenti. Proin facilisis, nunc et laoreet ornare, justo quam ultrices nibh, ut suscipit lectus nibh non dolor. Nam elementum, neque scelerisque luctus hendrerit, nisi nisl sagittis est, id facilisis quam lacus at dui. Morbi sagittis suscipit iaculis.
Duis a magna ut mauris vehicula tempus. Nulla at quam arcu. Nulla leo quam, ultricies imperdiet faucibus et, vehicula vel justo. Nulla laoreet tellus vitae turpis laoreet condimentum. Duis posuere, justo vel vestibulum dictum, nisl ante vehicula elit,
eget vulputate eros quam id lectus. Phasellus aliquam aliquet mauris non posuere. Morbi consectetur fermentum pellentesque. Cras sit amet quam urna. Praesent cursus dignissim neque quis gravida. Morbi vehicula venenatis vehicula. Aenean dictum hendrerit
metus, sit amet ullamcorper libero cursus a. Mauris porta tellus ultricies mi volutpat tincidunt. Nullam convallis, lorem eu aliquet laoreet, ipsum metus luctus neque, a pellentesque diam mauris vel quam. Proin scelerisque pretium neque sed cursus.
Donec dignissim consequat erat, gravida laoreet nisl suscipit quis. Donec hendrerit tempus ligula eget convallis. Suspendisse at odio leo. Mauris vitae ante erat. Praesent adipiscing ipsum eget sapien gravida feugiat. Mauris vehicula elementum mi
in molestie. Maecenas facilisis adipiscing orci ac gravida. Mauris hendrerit aliquam risus vitae scelerisque. Fusce non nunc non dolor lobortis tristique vel nec enim. Fusce ultricies, lorem eu interdum accumsan, mauris eros lacinia ligula, nec facilisis
turpis nisl et ligula. Phasellus tincidunt congue interdum. Suspendisse potenti. Nam malesuada molestie libero et fermentum. Cras imperdiet lacus a lectus suscipit quis tincidunt libero dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur ac nulla nisi. Sed velit urna, pellentesque et lobortis ut, pharetra ac lacus. Nam a tellus tortor, non ultrices sapien. Curabitur feugiat dapibus ligula, nec sollicitudin elit ultricies ac. Quisque luctus tincidunt neque vel varius. Integer
tincidunt, neque ut pretium sollicitudin, nulla nisl sollicitudin massa, eu aliquam justo eros at lacus. Curabitur laoreet volutpat interdum. Aliquam erat volutpat. Vestibulum et est ut dolor condimentum fringilla. Vivamus blandit, neque a dictum
rutrum, odio est ornare risus, ut mattis augue dolor et urna. Sed magna orci, porttitor euismod hendrerit vitae, tristique congue sapien. Pellentesque cursus commodo ante non convallis. Duis quis leo at augue congue vulputate. Praesent porta dapibus
dapibus. Integer commodo, lacus nec dignissim consectetur, massa arcu mollis velit, et lobortis sapien nibh ut dolor. Duis condimentum venenatis sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Etiam id semper nibh. In eu sagittis tellus. Nunc risus libero, adipiscing vitae sollicitudin lobortis, molestie sit amet arcu. Aenean vulputate varius porttitor. Maecenas in orci neque. Etiam feugiat nisi ut lacus venenatis rhoncus. Quisque rutrum
suscipit tristique. Pellentesque ut malesuada ante. Aliquam erat volutpat. Nulla porttitor ornare velit, vel ultrices ligula malesuada at. Curabitur adipiscing sapien nisi, eu volutpat ipsum. Nam lobortis facilisis libero, ac mollis nibh fringilla
sit amet. Ut vel sem lectus, non ullamcorper ipsum. Donec in accumsan tortor. Quisque et arcu massa, sed sodales eros. Fusce ligula sapien, placerat ornare facilisis vel, ultricies et ligula. Etiam scelerisque urna vitae metus accumsan semper ac quis
felis. Vestibulum vel magna urna, lobortis eleifend urna. Praesent et aliquam diam. Sed feugiat ante tincidunt odio luctus vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla dapibus condimentum
mauris at eleifend. Sed eu dui at libero ullamcorper hendrerit. Duis ut neque elit, in blandit orci. Quisque tincidunt faucibus nunc vitae sagittis. Nunc at lectus vehicula massa placerat luctus at non odio. Sed nec mauris sit amet quam viverra posuere.
Donec euismod mi quis nibh lobortis quis vulputate dui rutrum. Aliquam vel sollicitudin leo. Proin mollis nibh vel quam congue eget egestas est luctus. Donec quis viverra nisi. Mauris porta porttitor vehicula. Nulla facilisi. Maecenas libero nibh,
auctor sed pellentesque sit amet, facilisis eu arcu. Praesent ut interdum ligula. Curabitur ac elit vehicula urna lobortis tempus. Cras venenatis iaculis urna, eget pellentesque neque pulvinar quis. Vivamus diam enim, egestas dictum semper nec, sagittis
et velit. Cras elementum suscipit sapien nec bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas malesuada, diam at ultricies congue, libero orci porttitor elit, eget consequat est urna vitae ipsum. Sed massa ipsum, consequat
interdum euismod vitae, ultrices eu risus. Aliquam erat volutpat. Suspendisse sit amet hendrerit sapien. Duis eu sagittis turpis. Sed adipiscing, orci et venenatis vulputate, magna quam consectetur leo, vitae placerat metus ipsum at diam. Curabitur
vitae nisl orci, scelerisque viverra magna. Maecenas orci turpis, sollicitudin non tincidunt nec, fringilla eu purus. Quisque risus magna, viverra pretium tempor non, vestibulum vel sapien. Etiam tempor auctor lacus eu euismod. Nunc sagittis ligula
eget lorem tempor a consequat lectus fermentum. Nullam id dolor nisi. Etiam mollis condimentum ante, quis sollicitudin lacus egestas eu. Vivamus placerat, libero eu bibendum iaculis, leo arcu posuere justo, eget sagittis sem massa vel nibh. Nunc felis
metus, sagittis vel euismod imperdiet, porttitor et urna. Mauris ultrices lectus sed est fermentum a semper nulla pharetra. Mauris mollis gravida arcu, nec tempor dolor varius sed. Aliquam blandit, orci vitae iaculis adipiscing, dui purus eleifend
nibh, vitae iaculis augue felis vitae risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam faucibus laoreet commodo. Cras suscipit egestas placerat.
</div>
<div id="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec lorem mauris. Nulla fermentum tincidunt nulla et dignissim. In porttitor sem id velit lobortis aliquam. Duis et purus ac orci porttitor luctus at quis leo. Mauris vulputate pellentesque
est, sit amet egestas tellus facilisis sit amet. Cras sodales bibendum tellus, a gravida tortor hendrerit sed. Pellentesque blandit posuere nisl, sit amet cursus nisl dignissim non. Vivamus at orci sit amet elit lacinia posuere sit amet malesuada
elit. Duis quis luctus magna. Phasellus pharetra urna a dolor vulputate ultrices. Nam ornare orci justo, et fringilla lacus. Etiam tristique enim sed enim tempus tincidunt. Fusce rutrum dui at erat iaculis suscipit. Aenean id urna sit amet arcu pulvinar
accumsan. Aenean malesuada, nisi sed ultricies tempus, elit nisl interdum leo, sit amet bibendum eros arcu pretium nisi. Nam magna dolor, lacinia adipiscing iaculis ac, viverra sit amet ligula. Fusce vitae est sit amet ipsum iaculis molestie a ac
nisi. Curabitur porta nunc quis magna interdum nec hendrerit ligula suscipit. Curabitur non accumsan sapien. Donec non ligula a lorem lobortis scelerisque ac a sem. Sed porta blandit odio a ullamcorper. Mauris in suscipit quam. Duis sit amet ipsum
purus. Donec sed nunc lacus. Cras mattis felis quis lacus ultrices pharetra tristique nibh venenatis. In id eros sed libero iaculis commodo quis vitae neque. Nulla gravida neque in tortor congue id mattis massa auctor. Cras auctor tincidunt ipsum,
in suscipit risus iaculis sed. Nulla at eros nec urna auctor tincidunt eu ac diam. Aenean nulla metus, accumsan eu dignissim vitae, congue sed nisl. Pellentesque ut nunc eget metus malesuada vulputate ac aliquam nibh. Pellentesque felis erat, tristique
nec semper vel, dignissim ut nisl. Donec ac dui purus. Nunc in ligula lacus. In vehicula scelerisque convallis. Ut in ornare ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam et libero a nibh venenatis
tristique vitae vitae ligula. Phasellus vitae tempor ante. Proin egestas commodo enim. Curabitur eu justo non felis tempus fermentum ut vitae augue. Ut cursus ultrices metus eu vehicula. Praesent sem nulla, eleifend eget adipiscing a, tempor sit amet
lectus. Suspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero
faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie tincidunt. Sed congue mauris non ante pharetra eu facilisis velit rhoncus. Aenean dictum purus sit amet tortor ultricies auctor. Aliquam nunc quam, porttitor porta fringilla et,
bibendum sit amet urna. Vestibulum id tellus sed ipsum dignissim pharetra. Quisque non ipsum nec mauris ullamcorper interdum non et velit. Fusce lorem leo, molestie nec ultricies a, vulputate a ante. Aenean vel mauris libero, sit amet tempor sapien.
Suspendisse vel purus sit amet nunc placerat suscipit tincidunt et arcu. Donec sit amet magna diam. Nam a lacus libero. Proin vitae lectus at lorem rhoncus aliquet ut ut ligula. Nam ante dui, placerat quis fermentum quis, eleifend ac justo. Morbi
gravida urna eu risus scelerisque id tempus leo adipiscing. Morbi vel libero eu felis congue venenatis sed eget tellus. Ut metus libero, auctor sed congue eu, fringilla vel purus. Donec urna lorem, congue ac dapibus in, sollicitudin id nunc. Sed ullamcorper,
nibh imperdiet ullamcorper ultrices, tortor leo elementum elit, sit amet auctor lectus justo et sem. Pellentesque sit amet erat sed orci ultricies rutrum sed eget est. Aenean quis elit arcu, ac rhoncus magna. Suspendisse eu magna vitae ligula porta
condimentum sit amet et lacus. Donec at varius erat. Curabitur semper dapibus lorem ac faucibus. Praesent ornare vehicula nisi in fermentum. Curabitur viverra lectus in odio dictum sed imperdiet magna vulputate. In hac habitasse platea dictumst. Suspendisse
potenti. Proin facilisis, nunc et laoreet ornare, justo quam ultrices nibh, ut suscipit lectus nibh non dolor. Nam elementum, neque scelerisque luctus hendrerit, nisi nisl sagittis est, id facilisis quam lacus at dui. Morbi sagittis suscipit iaculis.
Duis a magna ut mauris vehicula tempus. Nulla at quam arcu. Nulla leo quam, ultricies imperdiet faucibus et, vehicula vel justo. Nulla laoreet tellus vitae turpis laoreet condimentum. Duis posuere, justo vel vestibulum dictum, nisl ante vehicula elit,
eget vulputate eros quam id lectus. Phasellus aliquam aliquet mauris non posuere. Morbi consectetur fermentum pellentesque. Cras sit amet quam urna. Praesent cursus dignissim neque quis gravida. Morbi vehicula venenatis vehicula. Aenean dictum hendrerit
metus, sit amet ullamcorper libero cursus a. Mauris porta tellus ultricies mi volutpat tincidunt. Nullam convallis, lorem eu aliquet laoreet, ipsum metus luctus neque, a pellentesque diam mauris vel quam. Proin scelerisque pretium neque sed cursus.
Donec dignissim consequat erat, gravida laoreet nisl suscipit quis. Donec hendrerit tempus ligula eget convallis. Suspendisse at odio leo. Mauris vitae ante erat. Praesent adipiscing ipsum eget sapien gravida feugiat. Mauris vehicula elementum mi
in molestie. Maecenas facilisis adipiscing orci ac gravida. Mauris hendrerit aliquam risus vitae scelerisque. Fusce non nunc non dolor lobortis tristique vel nec enim. Fusce ultricies, lorem eu interdum accumsan, mauris eros lacinia ligula, nec facilisis
turpis nisl et ligula. Phasellus tincidunt congue interdum. Suspendisse potenti. Nam malesuada molestie libero et fermentum. Cras imperdiet lacus a lectus suscipit quis tincidunt libero dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur ac nulla nisi. Sed velit urna, pellentesque et lobortis ut, pharetra ac lacus. Nam a tellus tortor, non ultrices sapien. Curabitur feugiat dapibus ligula, nec sollicitudin elit ultricies ac. Quisque luctus tincidunt neque vel varius. Integer
tincidunt, neque ut pretium sollicitudin, nulla nisl sollicitudin massa, eu aliquam justo eros at lacus. Curabitur laoreet volutpat interdum. Aliquam erat volutpat. Vestibulum et est ut dolor condimentum fringilla. Vivamus blandit, neque a dictum
rutrum, odio est ornare risus, ut mattis augue dolor et urna. Sed magna orci, porttitor euismod hendrerit vitae, tristique congue sapien. Pellentesque cursus commodo ante non convallis. Duis quis leo at augue congue vulputate. Praesent porta dapibus
dapibus. Integer commodo, lacus nec dignissim consectetur, massa arcu mollis velit, et lobortis sapien nibh ut dolor. Duis condimentum venenatis sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Etiam id semper nibh. In eu sagittis tellus. Nunc risus libero, adipiscing vitae sollicitudin lobortis, molestie sit amet arcu. Aenean vulputate varius porttitor. Maecenas in orci neque. Etiam feugiat nisi ut lacus venenatis rhoncus. Quisque rutrum
suscipit tristique. Pellentesque ut malesuada ante. Aliquam erat volutpat. Nulla porttitor ornare velit, vel ultrices ligula malesuada at. Curabitur adipiscing sapien nisi, eu volutpat ipsum. Nam lobortis facilisis libero, ac mollis nibh fringilla
sit amet. Ut vel sem lectus, non ullamcorper ipsum. Donec in accumsan tortor. Quisque et arcu massa, sed sodales eros. Fusce ligula sapien, placerat ornare facilisis vel, ultricies et ligula. Etiam scelerisque urna vitae metus accumsan semper ac quis
felis. Vestibulum vel magna urna, lobortis eleifend urna. Praesent et aliquam diam. Sed feugiat ante tincidunt odio luctus vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla dapibus condimentum
mauris at eleifend. Sed eu dui at libero ullamcorper hendrerit. Duis ut neque elit, in blandit orci. Quisque tincidunt faucibus nunc vitae sagittis. Nunc at lectus vehicula massa placerat luctus at non odio. Sed nec mauris sit amet quam viverra posuere.
Donec euismod mi quis nibh lobortis quis vulputate dui rutrum. Aliquam vel sollicitudin leo. Proin mollis nibh vel quam congue eget egestas est luctus. Donec quis viverra nisi. Mauris porta porttitor vehicula. Nulla facilisi. Maecenas libero nibh,
auctor sed pellentesque sit amet, facilisis eu arcu. Praesent ut interdum ligula. Curabitur ac elit vehicula urna lobortis tempus. Cras venenatis iaculis urna, eget pellentesque neque pulvinar quis. Vivamus diam enim, egestas dictum semper nec, sagittis
et velit. Cras elementum suscipit sapien nec bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas malesuada, diam at ultricies congue, libero orci porttitor elit, eget consequat est urna vitae ipsum. Sed massa ipsum, consequat
interdum euismod vitae, ultrices eu risus. Aliquam erat volutpat. Suspendisse sit amet hendrerit sapien. Duis eu sagittis turpis. Sed adipiscing, orci et venenatis vulputate, magna quam consectetur leo, vitae placerat metus ipsum at diam. Curabitur
vitae nisl orci, scelerisque viverra magna. Maecenas orci turpis, sollicitudin non tincidunt nec, fringilla eu purus. Quisque risus magna, viverra pretium tempor non, vestibulum vel sapien. Etiam tempor auctor lacus eu euismod. Nunc sagittis ligula
eget lorem tempor a consequat lectus fermentum. Nullam id dolor nisi. Etiam mollis condimentum ante, quis sollicitudin lacus egestas eu. Vivamus placerat, libero eu bibendum iaculis, leo arcu posuere justo, eget sagittis sem massa vel nibh. Nunc felis
metus, sagittis vel euismod imperdiet, porttitor et urna. Mauris ultrices lectus sed est fermentum a semper nulla pharetra. Mauris mollis gravida arcu, nec tempor dolor varius sed. Aliquam blandit, orci vitae iaculis adipiscing, dui purus eleifend
nibh, vitae iaculis augue felis vitae risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam faucibus laoreet commodo. Cras suscipit egestas placerat.
</div>
</div>