如何在Next.js中让pageContent div高度铺满整个页面？

你的代码里用height:100%设置容器高度，这会导致容器高度被限制在视口范围内，不管内容多少都没法实现从顶到底铺满的效果。直接改下面几处就能解决：

修改后的CSS代码 #

html, body{
  min-height: 100vh; /* 用min-height:100vh替代height:100%，确保容器至少占满视口 */
  background-color: rgb(22, 22, 22);
  font-weight: 300;
  margin: 0;
}

* {
  outline: none !important;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#__next{
    min-height: 100vh; /* 同样改成min-height:100vh，跟随视口或内容高度 */
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.pageContent{
    flex: 1; /* 让pageContent自动填充flex容器的可用空间 */
    width: 80%;
    min-height: 100%;
    background-color: whitesmoke;
}

h1{
    color: rgb(221, 75, 31);
}

关键修改点说明 #

1. min-height:100vh替代height:100%：100vh对应浏览器视口的高度，min-height保证容器高度至少是视口高度，内容超出时容器会自动拉伸，不会被固定高度限制。
2. flex:1设置pageContent：因为#__next是flex布局容器，这个属性让pageContent占满容器的所有可用空间，确保高度从顶到底铺满。

修改后不管页面内容多少，pageContent都会完全铺满页面的垂直空间，内容超出时背景也会跟着延伸。

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