Flask页面百分比高度Card无法滚动至顶部问题求助

核心问题分析 #

1. 你当前的body用了height:100vh+flex居中，但body本身有20px的padding，这会让实际内容高度超出视口；再加上card的max-height:100%，相当于继承了这个超出的高度，配合flex的垂直居中，就会出现滚动时顶部内容被截断的情况。
2. card用了默认的flex-direction:row，小屏内容换行后高度计算逻辑混乱，导致滚动条异常显示。

具体修复代码 #

修改body的CSS：

body {
  font-family: Rubik, sans-serif;
  color: white;
  padding: 20px;
  /* 用min-height避免内容超出时被截断，box-sizing让padding算在高度内 */
  min-height: 100vh;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  display: flex;
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.75), 
      rgba(0, 0, 0, 0.75)
    ),
    url(static.gif);
}

修改card的CSS：

.card {
  overflow: auto;
  padding: 20px;
  padding-top: 30px;
  margin-top: 0px;
  border-radius: 15px;
  background: #22222a;
  border: 2px solid white;
  display: flex;
  position: relative;
  /* 垂直排列内容，适配移动端 */
  flex-direction: column;
  align-items: flex-start; /* 取消垂直居中，避免滚动截断 */
  justify-content: flex-start;
  /* 计算可用高度，减去body的上下padding */
  max-height: calc(100vh - 40px);
  /* 确保padding算在card高度内 */
  box-sizing: border-box;
}

额外优化说明 #

如果需要保持card在页面垂直居中，同时内容超出时能正常滚动，可以给body加一层嵌套容器：把card放在一个container里，给container设置flex:1、max-height:100%、overflow:hidden，再让card的max-height:100%，这样既能保证居中效果，又不会出现内容滚动截断的问题。

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