页面全屏无滚动布局故障求助：footer被挤下移出现滚动条

看起来你遇到的是经典的「固定头部+固定底部+中间内容填满剩余空间」的布局难题，还附带图片拉伸的困扰。我来帮你一步步修正：

问题根源分析 #

你的现有代码存在几个关键漏洞：

• 只给body设置了height:100%，但没给根元素html设置高度，导致body的100%高度没有正确的参考基准
• .content用了position:absolute但没限制上下范围，加上height:100%会直接占满整个视口高度，再叠加header和footer的高度就会超出视口，触发滚动条
• 图片设置width:100%;height:100%会强制拉伸填满容器，完全破坏原有宽高比

修正后的完整CSS方案 #

/* 先给根元素和body设置基础样式，确保视口高度基准正确 */
html, body {
  height: 100%;
  width: 100%;
  margin: 0; /* 清除默认边距，避免额外滚动条 */
  padding: 0;
  background: blue;
}

/* 头部和底部保持固定高度 */
.header, #footer {
  height: 100px;
  width: 100%;
  background: red;
}

/* 用flex布局实现自动分配空间，这是最简洁的方案 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保容器至少占满整个视口高度 */
}

.content {
  flex: 1; /* 核心属性！让中间内容自动填充header和footer之外的剩余空间 */
  background: green;
  overflow: auto; /* 若.content内部内容过多，仅让内部滚动，不影响整个页面 */
}

/* 解决图片拉伸问题，保留原有宽高比 */
.look .bg1 {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片覆盖容器，保持比例，超出部分自动裁剪 */
  /* 若想完整显示图片，可改用object-fit: contain; 但容器会出现空白区域 */
}

配套HTML结构建议 #

确保你的HTML结构符合flex布局的嵌套要求：

<div class="container">
  <div class="header">头部内容</div>
  <div class="content">
    <div class="look">
      <img src="你的图片路径" class="bg1" alt="背景图">
      <!-- 其他内容 -->
    </div>
  </div>
  <div id="footer">底部内容</div>
</div>

方案说明 #

• html, body同时设置height:100%并清除默认边距，确保视口没有多余留白
• container用flex-direction: column让子元素垂直排列，min-height:100vh保证容器至少占满视口高度
• content的flex:1是核心，它会自动占据header和footer之外的所有剩余空间，不会超出视口
• object-fit: cover让图片保持原有比例的同时填满容器，彻底解决拉伸变形问题

调整后，页面会刚好占满视口，无滚动条，footer固定在底部，图片也能保持正常比例啦！

内容的提问来源于stack exchange，提问作者Gabriel Baú