HTML/CSS网页内容超出视口却不显示滚动条，无法向下滚动如何解决

• 你把主内容容器.contents设为了position: fixed，同时把它的高度锁死为视口高度的85%。固定定位元素不参与正常文档流的高度计算，不管容器内部堆多少内容，整个页面总高度永远和视口一致，浏览器自然不会生成垂直滚动条。这就是你之前给html设置overflow: scroll、overflow-x: hidden完全无效的根本原因——页面本身没超出视口范围，根本没有可滚动的空间。
• 窄屏下横向溢出的问题，是因为固定定位元素的溢出范围不受根节点html/body的overflow规则约束，你设的根节点隐藏溢出的属性，管不到fixed定位的块。
• 你的CSS里.topping规则漏写了选择器后的左大括号{，会导致这段样式完全失效，浏览器解析时会直接跳过整个规则块。

1. 调整定位逻辑
   • 只保留顶部.topping和.navbar的position: fixed做常驻导航，删掉.contents的position: fixed规则
   • 删掉.contents写死的top: 15%和height: 85%，给它加padding-top: 15%的内边距，避开两个固定导航块的遮挡，容器高度改为由内部内容自适应撑开
2. 去掉硬编码尺寸的坑
   • 删掉顶部第二个h1写死的margin-left: 870px，这类固定像素边距在窄屏下会直接把元素挤出视口，改用flex布局给顶部栏做对齐就行，不需要手动硬拉边距
   • 给主内容区的图片加max-width: 100%; height: auto;规则，替代原来写死的height:97%，避免窄屏下图片挤压文字布局，也不会让内容溢出视口
3. 补全语法错误
   • 给.topping的选择器后面补上缺失的左大括号{，确保顶部栏的样式能正常生效

改完之后页面高度会随内部内容自动撑开，浏览器会自动生成垂直滚动条，之前遇到的“内容重排到图片下方就无法滚动查看”的问题就会解决。

内容的提问来源于stack exchange，提问作者Prem Sagar S