如何使用CSS实现页面内容始终垂直适配屏幕显示

完全可以实现，不需要改动现有Bootstrap网格的核心逻辑，优先选以下方案，稳定性和适配效果最好：

• 基础兜底CSS设置
  首先先锁死页面视口高度，禁止默认滚动条出现，给外层容器设置正确的盒模型规则：

html, body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
/* Bootstrap网格的外层包裹容器 */
.content-grid-wrap {
  height: 100%;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

• 等比缩放方案（推荐，不会破版）
  用CSS transform: scale() 做整体等比缩放，完全不影响Bootstrap原有网格布局逻辑，不会出现排版错位，性能消耗极低，适合长期挂屏的场景。
  只需要加少量JS逻辑，每次Ajax追加完新内容后，自动计算缩放比适配屏幕高度：

const gridContainer = document.querySelector('.content-grid-wrap')

// 适配函数，每次内容更新、窗口 resize 时执行
function adjustToFitScreen() {
  // 先重置缩放状态，获取内容真实高度
  gridContainer.style.transform = 'scale(1)'
  const contentRealHeight = gridContainer.scrollHeight
  const screenAvailableHeight = window.innerHeight
  // 计算缩放比例，留2%安全边距避免内容贴边
  const scaleValue = screenAvailableHeight / contentRealHeight * 0.98

  // 仅当内容超出屏幕高度时触发缩放，内容不足时保持原始大小
  if (scaleValue < 1) {
    gridContainer.style.transform = `scale(${scaleValue})`
    gridContainer.style.transformOrigin = 'top center'
  }
}

// 页面初始化时执行一次
adjustToFitScreen()
// 窗口尺寸变化时自动重新适配
window.addEventListener('resize', adjustToFitScreen)
// 每次Ajax请求完成、新内容追加到DOM后，手动调用 adjustToFitScreen() 即可

• 动态字号方案（备选，适合排版要求高的场景）
  如果不想做整体缩放，只想通过调整字号适配，可以利用Bootstrap默认基于rem单位的特性，动态修改根节点字号实现等比收缩，所有用rem设置的文字、间距、组件尺寸都会同步缩小：

function adjustByFontSize() {
  // 先重置默认根字号
  document.documentElement.style.fontSize = '16px'
  const contentRealHeight = gridContainer.scrollHeight
  const screenAvailableHeight = window.innerHeight
  const ratio = screenAvailableHeight / contentRealHeight * 0.98

  if (ratio < 1) {
    // 最小字号限制在10px，避免文字过小无法识别
    document.documentElement.style.fontSize = `${Math.max(10, 16 * ratio)}px`
  }
}

注意：如果你的代码里写了固定px值的元素尺寸、间距，这个方案可能出现排版错位，稳定性不如transform缩放方案。

• 避坑提示
  • 不要用非标准的zoom属性做缩放：不同浏览器渲染逻辑不一致，Firefox下兼容性很差
  • 一定要等Ajax返回的新内容完全插入DOM后再调用适配函数，否则会拿不到准确的内容高度，导致适配失效
  • 长期挂屏场景建议加缩放阈值，比如缩放比低于0.5时，自动移除最早加载的旧内容，避免文字缩太小失去可读性
  • 缩放时固定transformOrigin为顶部居中，避免内容偏移出视口

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