如何解决图片插入后body容器高度异常、背景无法撑开问题？

核心问题出在你给body设置了max-height: 100%属性，这个规则会强制body的高度最多只能达到浏览器视口的100%。当插入图片后，页面内容总高度超过视口高度，但body被max-height限制无法跟随内容扩展，导致body的背景只能覆盖到视口底部，超出部分会显示html的背景色。

另外，你给img使用的align="right"是HTML过时属性，建议换成CSS浮动实现，同时避免浮动元素导致的父容器高度塌陷问题。

具体修改步骤 #

1. 修复body高度限制 #

打开CSS代码，找到body的样式块，删除max-height: 100%;这一行，保留min-height: 100%;——这样既能保证内容不足时body铺满视口，又能让内容超出时body自动扩展高度。

修改后的body样式：

body {
  background: #424160;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 800px;
  min-width: 800px;
  min-height: 100%;
  /* 移除max-height: 100%; */
  padding: 2em 2em 4em;
  border-left: 3px solid #573444;
  border-right: 3px solid #573444;
}

2. 替换图片对齐方式为CSS浮动 #

删除HTML中img标签的align="right"属性，在CSS的img样式里添加float: right，还可以增加左侧外边距优化排版：

修改后的img样式：

img {
  background: transparent;
  border: 10px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  padding: 0;
  display: inline-block;
  max-width: 95%;
  float: right;
  margin-left: 1em; /* 可选，增加图片与文字的间距 */
}

3. 避免父容器高度塌陷（可选） #

因为图片浮动后，article可能出现高度塌陷问题，可给article添加清除浮动的样式：

article::after {
  content: "";
  display: table;
  clear: both;
}

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