ant design pro 框架中的 流程编辑器在IE11浏览器不兼容？Select组滚动条会分离

在网页开发中，如果遇到背景不能设置高度，导致滚动条无法正常工作的问题，这通常与CSS（层叠样式表）的设置有关。要解决这个问题，可以尝试以下几种方法：

1. 给容器设置高度和溢出属性：确保包含滚动内容的容器有明确的高度，并允许溢出内容使用滚动条显示。例如：

   .content-container {
    height: 100vh; /* 或具体像素值，如 500px */
    overflow-y: auto; /* 当内容超出时自动出现垂直滚动条 */
   }
   

   这里100vh代表视口高度的100%，可以根据需要调整为具体的像素值或百分比。

2. 使用Flexbox或Grid布局：现代布局方式如Flexbox或CSS Grid能更灵活地处理容器与内容的高度问题。

   • Flexbox示例：

     .parent-container {
     display: flex;
     flex-direction: column;
     }
     .content-container {
     flex: 1;
     overflow-y: auto;
     }
     

   • Grid示例：

     .parent-container {
     display: grid;
     grid-template-rows: 1fr auto; /* 第一行占据剩余空间 */
     }
     .content-container {
     overflow-y: auto;
     }
     

3. 检查HTML结构：确保你的HTML结构正确，没有意外的嵌套或浮动元素干扰了高度计算。有时候，一个未清除的浮动也会导致容器高度计算错误。

4. 使用min-height而非height：如果你希望容器至少有一定的高度，但也能随内容增长，可以使用min-height代替height：

   .content-container {
    min-height: 100vh;
    overflow-y: auto;
   }
   

5. 检查外部框架或库的影响：如果你使用了如Bootstrap、Vue.js等前端框架或UI库，它们可能有自己的样式规则，影响到元素的高度和滚动行为。检查是否有冲突的CSS规则，并适当覆盖它们。

通过上述方法之一，你应该能够解决背景高度设置及滚动条不正常显示的问题。记得在不同浏览器上测试以确保兼容性。