CSS如何实现浏览器窗口高度缩小时div仍保持页面全高显示

问题根源 #

1. 你当前给html设置了固定height: 90%，body设置了固定height: 100%，这两个高度都是继承自视口初始高度，不会随着内容超出视口而自动拉长。
2. 三个绝对定位的区块的min-height: 100%是继承自body的固定视口高度，当区块内部内容的实际高度超过这个视口高度时，min-height就不会继续延伸，就会出现你看到的背景截断的问题。
3. 侧边栏和个人信息区宽度更窄，相同文本量下高度刚好没超过初始视口高度，所以看起来没问题，内容区更宽文本流高度更高，超出了就暴露了问题。

修复方案 #

方案1：调整原有绝对定位逻辑的代码

修改html和body的样式，同时给绝对定位元素加底部对齐规则即可：

/* 把html和body的高度规则替换成如下 */
html {
  min-height: 100%;
}
body {
  position: relative;
  overflow-y: scroll;
  min-height: 100vh;
}
/* 给三个绝对定位区块都加上bottom: 0，让区块顶部对齐body顶部，底部对齐body底部，自动铺满整个body高度 */
.sidebar, .content, .profile {
  bottom: 0;
}

方案2：替换为Flex布局（更推荐，绝对定位做三栏布局维护性很差）

废弃原有的绝对定位写法，用flex实现三栏等高布局，天然适配高度变化：

/* 替换html、body、三个区块的样式如下 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  overflow-y: scroll;
  display: flex;
  gap: 4em;
  padding: 2em;
}

.sidebar {
  width: 15%;
  background-color: darkblue;
  color: white;
  padding: 2em;
}

.content {
  width: 60%;
  background-color: green;
  color: white;
  padding: 2em;
}

.profile {
  width: 15%;
  padding: 2em;
  background-color: firebrick;
  color: black;
}

对应的HTML不需要做任何修改，flex布局下三个列默认会等高，自动跟着最高的一列拉伸，不管窗口怎么缩放、内容多少都不会出现背景截断的问题。

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