平板/移动端页面底部多余空白问题求助

根据你的代码和描述，页面在移动端/平板出现大量空白的核心原因是Grid布局高度计算异常，结合动态加载的导航栏/页脚、固定宽度元素的冲突导致，以下是针对性修复方案：

核心问题分析 #

1. Body的Grid布局未绑定视口高度：你设置了grid-template-rows: auto 1fr auto，但min-height: auto导致Grid无法基于视口高度分配空间，当页面内容较少时，1fr会被错误计算产生空白。
2. .content的min-height计算逻辑冲突：calc(100% - 50px)依赖父元素的明确高度，但body未设置视口高度，导致该规则失效反而可能引入额外空白。
3. 移动端固定宽度元素溢出：.card-image和.card-products设置固定width:300px，在窄屏设备上会超出容器宽度，触发横向滚动或留白。
4. 全局滚动设置冗余：html { overflow: scroll }强制显示滚动条，可能导致不必要的空白区域。

修复步骤与代码修改 #

修改后的CSS代码 #

* {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: cornsilk;
  box-sizing: border-box;
}

.registrierungLabel {
  color: rgba(126, 79, 24, 0.514);
}

a {
  color: rgb(184, 107, 82);
  text-decoration: none;
}

a:hover {
  color: cornsilk;
}

/* 移除冗余的overflow:scroll，仅保留横向隐藏 */
html {
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

body {
  padding-top: 140px;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* 绑定视口高度，确保Grid布局正确分配空间 */
  min-height: 100vh;
  background-color: #e9aa83;
}

.btn {
  border-style: none;
  padding: 10px 20px;
}

.btn-primary {
  background-color: cornsilk;
  color: rgb(184, 107, 82);
}

.btn:hover {
  background-color: rgb(184, 107, 82);
  color: cornsilk !important;
}

.accordion-item {
  border-color: rgba(135, 74, 54, 0.79);
}

@media screen and (max-width: 768px) {
  /* 将固定宽度改为max-width，避免溢出容器 */
  .card-image {
    max-width: 300px;
    width: 100%;
  }
  .card-products {
    max-width: 300px;
    width: 100%;
  }
}

.card-products {
  padding-left: 0;
  padding-right: 0;
}

/* 移除冲突的min-height，由Grid的1fr控制内容区域高度 */
.content {
  padding-bottom: 50px;
}

.navbar {
  background-color: #e9aa83;
}

关键修改说明 #

1. Body视口高度绑定：将min-height: auto改为min-height: 100vh，让Grid布局基于整个视口高度分配导航栏、内容、页脚的空间，1fr会自动填充剩余区域，不会产生多余空白。
2. 移除.content的min-height：Grid布局已经通过1fr控制内容区域高度，原calc(100% -50px)会和Grid规则冲突，仅保留必要的padding-bottom避免内容被页脚遮挡。
3. 移动端宽度自适应：将固定width:300px改为max-width:300px + width:100%，确保元素在窄屏上不会溢出容器，消除横向空白。
4. 优化全局滚动设置：移除html { overflow: scroll }，仅保留overflow-x: hidden，避免强制显示滚动条导致的空白。

额外检查点 #

• 确认动态加载的#navbar和#footer没有设置超出预期的margin或padding，否则会影响Grid布局的高度计算。
• 检查有问题的页面是否包含其他固定高度/绝对定位元素，这类元素可能脱离文档流导致空白。

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