HTML CSS滚动菜单问题：设置overflow:scroll后页面仍被拉长

• 问题根源：你设置的height:20px过小，再加上h5标签默认带有上下外边距，导致内部元素实际高度超出容器限制；同时浮动元素未触发BFC，容器无法正确约束内部元素高度，自然无法触发滚动效果。

• 修复方案：

  1. 把容器高度调整到合理值（比如80px），避免高度过小导致内容裁切或撑破容器；
  2. 重置内部元素的默认边距，防止它们撑开容器；
  3. 给浮动容器添加display:block，确保容器能正确计算自身高度。

• 修改后的代码示例：

<div class="column1" style="float: left; text-align: left; overflow:scroll; height:80px; display:block;">
  <div style="margin:0;">
    <h5 style="margin:0;">
      <a href="#4_May_2023"> 4 May 2023 </a>
    </h5>
    <!-- 其他重复链接 -->
  </div>
</div>

• 额外提示：
  • 如果必须使用20px高度，需把内部所有元素的margin、padding设为0，同时设置line-height:20px让文字垂直居中，避免内容被裁切；
  • 浮动元素可配合clearfix类解决父元素高度塌陷问题，但这里因为设置了固定高度，只要内部元素不超出容器高度，滚动就能正常生效。

内容的提问来源于stack exchange，提问作者broccoli29