Javascript 向上或向下旋转时Div/Box出现问题

我使用了

位置：固定

这样在向上或向下滚动时，框保持在同一位置

问题是Categories（div）在很大的时候并没有显示所有的内容。类别底部缺少内容

见示例：

标题
类别
第一类
第2类
第3类
第四类
第五类
第六类
第7类
第8类
第9类
第10类
第11类
第12类
第13类
第14类
第15类
第16类
第17类
第18类
项目1
项目1
项目1
项目2
项目2
项目2
项目3
项目3
项目3
项目4
项目4
项目4
项目5
项目5
项目5
项目6
项目6
项目6
项目7
项目7
项目7
项目8
项目8
项目8
项目9
项目9
项目9
购物车信息。

内容在那里，但由于div是固定的，因此您永远无法向下滚动查看方框底部的任何内容

如果可能的话，我会阅读更多关于页面布局和css的内容-例如，您在这里使用了很多DIV，最好使用列表，并且有很多内联css可以用几行css替换

----编辑----

假设您希望保留此设计，您可以绕过它的一种方法（虽然可能不是最方便用户或最美观的方法）是为侧菜单设置高度，并将overflow设置为auto

因此，您将替换“side_manu”div，如下所示：

<div id="side_manu" style="float:left; width:190px;  position: fixed; margin-bottom:300px; height: 75%; overflow: auto; border:1px solid black"> 
   Categories 
             <div style="padding:10px"> Cat 1 </div>
             <div style="padding:10px"> Cat 2 </div>
             <div style="padding:10px"> Cat 3 </div>
             <div style="padding:10px"> Cat 4 </div>
             <div style="padding:10px"> Cat 5 </div>
             <div style="padding:10px"> Cat 6 </div>
             <div style="padding:10px"> Cat 7 </div>
             <div style="padding:10px"> Cat 8 </div>
             <div style="padding:10px"> Cat 9 </div>
             <div style="padding:10px"> Cat 10 </div>
             <div style="padding:10px"> Cat 11 </div>
             <div style="padding:10px"> Cat 12 </div>
             <div style="padding:10px"> Cat 13 </div>
             <div style="padding:10px"> Cat 14 </div>
             <div style="padding:10px"> Cat 15 </div>
             <div style="padding:10px"> Cat 16 </div>
             <div style="padding:10px"> Cat 17 </div>
             <div style="padding:10px"> Cat 18 </div>

类别
第一类
第2类
第3类
第四类
第五类
第六类
第7类
第8类
第9类
第10类
第11类
第12类
第13类
第14类
第15类
第16类
第17类
第18类

• 请注意添加的高度和溢出参数，我已经删除了额外的border div，并将border属性添加到“side_manu”div中

---

我认为您只需删除内容中任何不必要的标题或填充，即可将其放入以下内容中：

---

你所说的“当它变大时”是什么意思？看看这个例子，底部缺少类别内容。我知道有很多div，这只是一个快速演示。但解决办法是什么呢？JavaScript？抱歉，我仍然需要相同大小的标题。我肯定有办法解决这个问题，也许Jquery？

<div id="side_manu" style="float:left; width:190px;  position: fixed; margin-bottom:300px; height: 75%; overflow: auto; border:1px solid black"> 
   Categories 
             <div style="padding:10px"> Cat 1 </div>
             <div style="padding:10px"> Cat 2 </div>
             <div style="padding:10px"> Cat 3 </div>
             <div style="padding:10px"> Cat 4 </div>
             <div style="padding:10px"> Cat 5 </div>
             <div style="padding:10px"> Cat 6 </div>
             <div style="padding:10px"> Cat 7 </div>
             <div style="padding:10px"> Cat 8 </div>
             <div style="padding:10px"> Cat 9 </div>
             <div style="padding:10px"> Cat 10 </div>
             <div style="padding:10px"> Cat 11 </div>
             <div style="padding:10px"> Cat 12 </div>
             <div style="padding:10px"> Cat 13 </div>
             <div style="padding:10px"> Cat 14 </div>
             <div style="padding:10px"> Cat 15 </div>
             <div style="padding:10px"> Cat 16 </div>
             <div style="padding:10px"> Cat 17 </div>
             <div style="padding:10px"> Cat 18 </div>