如何填充可视页面剩余部分为背景色且不增加页面可滚动区域？

你原来的写法核心问题在于：给.footer设置min-height: 100vh再配合负margin的逻辑本身就有缺陷。100vh是完整视口高度，就算用负margin往上拉了150px，整个元素的总高度还是接近1视口高，相当于给页面额外加了近一屏的高度，自然会导致滚动区域变大，而且如果页面内容高度变化，负margin的值也要跟着改，适配性极差。

下面是两个可直接使用的解决方案：

方案1：Flex弹性布局实现（最通用，footer需要放内容也适用） #

这个方案不需要写死任何高度值，内容不足一屏时footer自动占满剩余空间，内容超过一屏时footer跟着内容往下走，不会额外产生滚动条。

修改后的CSS代码：

/* 先重置默认边距，避免浏览器默认样式干扰 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.body {
  margin-left: 50px;
  /* 外层容器设最小高度100vh，开启垂直弹性布局 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.footer {
  background-color: grey;
  /* flex:1表示自动占满父容器剩余空间 */
  flex: 1;
}

img {
  margin-left: 200px;
}

h1 {
  text-align: center;
}

HTML只需修正原有代码的两个小问题即可：补全img标签闭合尖括号、修正拼写错误的text-centerr为text-center

<div class="body">
  <div class="row justify-content-center text-center">
    <h1>
      This is my page heading
    </h1>
  </div>
  <div class="row justify-content-center text-center">
    <p>
      This is some information about this page. 
    </p>
  </div>
  <div class="row justify-content-center text-center">
    <div class="justify-content-center">
      <img src="https://cdn.vox-cdn.com/thumbor/RkBHz5tPuCNQOG0a6FooNwiqQyw=/0x0:939x704/1820x1213/filters:focal(0x0:939x704):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/49610677/homersimpson.0.0.jpg"
      width="300px"
      height="300px">
    </div>
  </div>
  <div class="footer">
    <!-- 可正常放置footer内容 -->
  </div>
</div>

方案2：背景色直接设置（footer不需要放内容时最简方案） #

如果你不需要在灰色区域放任何内容，只是要填充剩余部分的背景色，连footer元素都可以删掉，直接改全局背景即可：

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* 整个页面背景设为灰色 */
  background-color: grey;
}

/* 给上方内容区域单独加白色背景 */
.content-wrap {
  background-color: #fff;
  margin-left: 50px;
}

img {
  margin-left: 200px;
}

h1 {
  text-align: center;
}

对应HTML结构：

<div class="content-wrap">
  <div class="row justify-content-center text-center">
    <h1>
      This is my page heading
    </h1>
  </div>
  <div class="row justify-content-center text-center">
    <p>
      This is some information about this page. 
    </p>
  </div>
  <div class="row justify-content-center text-center">
    <div class="justify-content-center">
      <img src="https://cdn.vox-cdn.com/thumbor/RkBHz5tPuCNQOG0a6FooNwiqQyw=/0x0:939x704/1820x1213/filters:focal(0x0:939x704):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/49610677/homersimpson.0.0.jpg"
      width="300px"
      height="300px">
    </div>
  </div>
</div>

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