固定容器内溢出内容div的滚动条位置控制，实现整页票据效果

问题根源 #

原有实现的两个核心错误点：

1. 给#ticket设置position: fixed导致元素脱离文档流，页面滚动时固定定位元素不会跟随文档移动，出现滚动滑出票据区域的问题
2. 给局部容器设置overflow-y: auto导致滚动条出现在票据局部，不符合需求

核心实现思路 #

• 移除#ticket的固定定位，让票据元素跟随文档流布局
• 给#topPart添加粘性定位position: sticky，滚动时始终固定在视口顶部，保证票据头部形态始终可见
• 给#bottomPart设置最小高度为视口剩余高度，内容不足时自动撑满页面，内容超出时跟随文档流自动撑开，始终保持完整票据形态
• 直接使用浏览器原生页面滚动条，无局部滚动条

完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>票据页面</title>
  <style>
    html {
      box-sizing: border-box;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    html,
    body {
      margin: 0;
      /* 保证页面最小高度铺满视口 */
      min-height: 100vh;
    }

    body {
      background-color: white;
    }

    #ticket {
      padding: 5px;
      width: 100%;
      min-height: 100vh;
      filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
    }

    #topPart {
      clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 67px,
        calc(100% - 25px) 77px,
        25px 77px,
        0% 67px
      );
      background-color: tomato;
      height: 75px;
      width: 100%;
      border-bottom: 2px dashed white;
      /* 粘性定位固定在顶部 */
      position: sticky;
      top: 0;
      z-index: 10;
    }

    #bottomPart {
      background-color: tomato;
      clip-path: polygon(
        25px -2px,
        calc(100% - 25px) -2px,
        100% 8px,
        100% 100%,
        0% 100%,
        0% 8px
      );
      /* 最小高度撑满视口剩余空间 */
      min-height: calc(100vh - 75px - 5px);
      border-top: 2px dashed white;
      padding: 5px;
    }

    #content {
      height: 300vh;
    }
  </style>
</head>
<body>
  <div id="ticket">
    <div id="topPart"></div>
    <div id="bottomPart">
      <div id="content">content</div>
    </div>
  </div>
</body>
</html>

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