html - 垂直滚动菜单不显示底部元素

Question

出现的问题是该网站包含两个不同的滚动条，一个用于内部垂直显示，可容纳 90 多个元素但最多能够获得 200 多个元素，然后页面滚动。当您向下滚动菜单时，它会滚动，但在某个点后滚动条消失，然后整个页面向下滚动以查看列表中的其余元素。我调查了这个JSFiddle ，但我不确定如何正确地实现这一目标。

垂直菜单是 height: 800px;，但我已经尝试将其设置为高度的 80% 或 height: 500px;，但都没有解决了这个问题。

这fiddle是一个很好的演示，展示了当我使用侧边栏滚动时发生的事情。

Answer 1

默认情况下，body 上有一个边距，可以创建通常不需要的空白。在您的情况下，边距会增加一些空间，导致页面比您预期的要大，因此会添加额外的滚动条。

在下面的示例中，我:

1. 添加了 margin: 0px 来移除多余的空白
2. 将页面高度设置为 100%，因为额外的 2% 只是用来覆盖我们现在移除的边距。 (此外，对于不同的设备，使用 98% 可能是不可预测的)。
3. 向内容添加填充，使其看起来与您拥有的内容相同
4. 添加了 box-sizing，以便内容保持 100% 的宽度和高度，同时仍然包括填充。

#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>