为什么打印时按钮被背景遮挡显示不全？左右分栏布局样式问题

核心问题根源 #

• 左右分栏容器使用了position: fixed定位，且错误设置了height: 50%，直接限制了垂直可用空间，超出的内容会被默认裁切
• 左侧栏内部的.centered容器设置了left: 80%，已经超出了左栏65%的宽度边界，内容偏移出容器范围后被裁切
• 未针对打印场景做适配，屏幕端的定位、固定宽度样式直接应用到打印预览时，与打印纸尺寸不匹配
• textarea设置了800px的固定宽度，宽度不足时会撑破容器，进一步挤压底部按钮的显示空间

修复方案 #

1. 调整布局样式，替换fixed定位为弹性布局 #

删掉原有.split、.split2、.centered相关的定位规则，改用flex实现分栏，适配性更强：

/* 替换原有分栏相关样式 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-y: auto;
}

.split {
  flex: 0 0 65%;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.split2 {
  flex: 0 0 35%;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.centered {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

2. 修改固定宽度元素为自适应 #

调整textarea的宽度规则，适配不同尺寸：

textarea {
  width: 100%;
  max-width: 800px;
  height: 100px;
  resize: none;
}

3. 新增打印场景适配规则 #

添加打印媒体查询，调整打印时的边距、隐藏不需要的元素：

@media print {
  html, body {
    overflow: visible;
  }
  /* 如果不需要在打印结果里显示按钮，可添加下面这行 */
  /* .button { display: none; } */
  .split, .split2 {
    overflow: visible;
  }
}

4. 可选优化 #

原有代码存在嵌套form的错误，可删除内层多余的<form action="/action_page.php">和对应的</form>标签，避免表单功能异常。

修改后按钮不会再超出容器范围，打印预览也能正常显示完整内容。

内容的提问来源于stack exchange，提问作者Gonçalo Sousa