如何让fixed定位元素内的白色盒子撑满文档高度并避免截断

问题根源 #

.justblack作为flex容器，默认的align-items: stretch会强制子元素.inner拉伸至容器的可用高度（视口高度减去上下margin），导致.inner内部超长内容无法撑开自身高度，最终被截断。同时html未设置高度，可能引发父级高度计算异常。

具体修复步骤 #

1. 修正根元素高度
   给html添加高度设置，确保页面根元素高度计算正确：

html {
  height: 100%;
}

2. 调整flex容器对齐规则
   修改.justblack的对齐方式，让.inner高度由自身内容决定：

.justblack {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(55, 55, 55, 0.5);
  z-index: 94;
  overflow: auto; /* 替换scroll为auto，仅在内容超出时显示滚动条 */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 关键：取消强制拉伸，让.inner高度自适应内容 */
}

3. 可选：设置.inner最小高度（按需添加）
   如果希望.inner在内容较少时也能撑满视口（减去上下margin），可以添加最小高度：

.inner {
  margin-top: 30px;
  margin-bottom: 30px;
  width: 600px;
  border: 0;
  box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.35);
  max-width: 60vw;
  padding: 30px;
  background: #fff;
  min-height: calc(100vh - 60px); /* 100vh是视口高度，减去上下margin总和60px */
}

完整修复后的代码 #

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            html {
                height: 100%;
            }
            body {
                position: relative;
                display: flex;
                height: 100%;
                flex: 1;
            }
            .main {
                position: relative;
                display: flex;
                height: 100%;
            }
            .justblack {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(55, 55, 55, 0.5);
                z-index: 94;
                overflow: auto;
                display: flex;
                justify-content: center;
                align-items: flex-start;
            }
            .inner {
                margin-top: 30px;
                margin-bottom: 30px;
                width: 600px;
                border: 0;
                box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.35);
                max-width: 60vw;
                padding: 30px;
                background: #fff;
                /* 可选最小高度，按需开启 */
                /* min-height: calc(100vh - 60px); */
            }
            section {
                padding: 30px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="justblack">
                <div class="inner">
                    <section>some data</section>
                    <section>more data</section>
                    <section>this data</section>
                    <section>that data</section>
                    <section>no data</section>
                    <section>red data</section>
                    <section>blue data</section>
                    <section>green data</section>
                    <section>yellow data</section>
                    <section>black data</section>
                    <section>black data</section>
                    <section>black data</section>
                    <section>black data</section>
                    <section>black data</section>
                    <section>black data</section>
                    <section>black data</section>
                    <section>black data</section>
                    <section>black data</section>
                    <section>black data</section>
                    <section>brown data</section>
                    <section>important data</section>
                    <section>nice data</section>
                    <section>beautiful data</section>
                    <section>gray data</section>
                    <section>byebye data</section>
                    <section>game data</section>
                    <section>change data</section>
                    <section>none data</section>
                </div>
            </div>
        </div>
    </body>
</html>

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