网页底部大量空白问题求助：调整边距内边距无效

问题根源 #

页面底部出现大量空白，核心原因是你给#main-bg和#chat-response-box设置了固定高度750px，而右侧主内容区（.main-bg）使用了vh-100（占视口100%高度）。当视口高度大于750px时，固定高度的元素无法填充整个主内容区，导致底部出现空白；同时浏览器默认的body边距也会加剧这个问题。

修复步骤 #

1. 移除固定高度，改用Flex布局填充剩余空间
   修改CSS样式，替换固定高度为flex布局，让内容自动适配视口高度：

   /* 重置body默认边距，消除页面外围空白 */
   body {
     margin: 0;
     padding: 0;
   }
   
   /* 让主内容容器填充整个视口高度 */
   .main-bg .main-content {
     height: 100%;
     display: flex;
     flex-direction: column;
   }
   
   /* 让内部容器填充剩余空间 */
   .main-bg .main-content .container {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
   }
   
   /* 移除固定高度，用flex居中初始页面内容 */
   #main-bg {
     /* height: 750px; */
     flex-grow: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 0;
   }
   
   /* 移除固定高度，让聊天区域自动填充剩余空间 */
   #chat-response-box {
     /* height: 750px; */
     flex-grow: 1;
     overflow-y: auto;
     overflow-x: hidden;
     padding-right: 20px;
   }
   

2. 固定聊天输入框位置
   确保输入框始终位于页面底部，避免被内容遮挡：

   #chat-input-box {
     margin-top: auto;
     padding-bottom: 20px;
   }
   

额外优化 #

• 保留.main-bg的vh-100类，确保主内容区始终占满视口高度
• 移除#main-bg的padding-top:20%，改用flex居中更适配不同屏幕尺寸

修改后，页面内容会自动填充整个视口高度，无论屏幕大小如何，都不会出现底部空白。

内容的提问来源于stack exchange，提问作者Muhammed Aslam A