如何实现HTML中fullscreen div全屏显示且无滚动？

你的问题核心是内容总高度超过视口高度，虽然设置了height:100%或100vh，但内部元素（比如图片、分数列表）的固定尺寸导致整体溢出。以下是可行的调整方案：

关键修改步骤 #

1. 确保根元素和全屏容器真正占满视口 #

把html, body和.fullscreen的高度设置改为min-height: 100vh，同时移除overflow: hidden（避免内容被强制截断）：

html, body {
  min-height: 100vh;
  margin: 0;
  background: #EAE8DD;
}
.fullscreen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

2. 让内容区域自适应剩余空间 #

给.content添加flex: 1和overflow-y: auto，使其自动填充头部以外的剩余高度；若内容过多，仅在该区域滚动（若要完全无滚动，需进一步限制内部元素尺寸）：

.content {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
  align-items: center;
  flex: 1;
  overflow-y: auto;
}

3. 限制图片高度，避免超出视口 #

将图片的固定max-height:800px改为基于视口的动态值，减去头部、输入框和间距的高度：

#pixel-image {
  max-height: calc(100vh - 250px); /* 根据实际布局调整数值 */
  max-width: 90%; /* 同时限制宽度，避免横向溢出 */
}

4. 优化分数列表布局 #

确保分数列表在剩余空间内合理换行、居中排列：

.scorelist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%; /* 占满内容区域宽度 */
}

修改后的完整CSS代码 #

* {
  font-family: 'Roboto';
}
html, body {
  min-height: 100vh;
  margin: 0;
  background: #EAE8DD;
}
.fullscreen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 20px;
}
.header h1 {
  color: #db5049;
}
.logo {
  width: 150px;
}
.avatar {
  width: 3%;
  border-radius: 50%;
}
.content {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
  align-items: center;
  flex: 1;
  overflow-y: auto;
}
.picture-area {
  display: flex;
  justify-content: center;
}
.timer-container {
  width: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
}
.timer-bar {
  height: 0;
  transition: height 1s linear;
}
#guess {
  border-radius: 10px;
  height: 30px;
  width: 20%;
  text-align: center;
  font-size: 16px;
}
#pixel-image {
  max-height: calc(100vh - 250px);
  max-width: 90%;
}
.scorelist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.score-item {
  display: flex;
  align-items: center;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.score-item img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}
.player-info {
  flex: 1;
}
.player-name {
  font-weight: bold;
  margin: 0;
}
.player-score {
  margin: 0;
}

原理说明 #

• min-height:100vh确保容器至少占满整个视口高度，避免父元素高度不足导致的适配问题。
• flex:1让.content自动填充头部以外的剩余空间，配合overflow-y:auto保证内容过多时仅在该区域滚动（若要完全无滚动，需确保图片和分数列表的总高度不超过.content的可用空间）。
• 动态计算图片高度，避免固定尺寸在小屏幕上溢出。

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