如何最大化Print与Non-Print按钮尺寸？求替代padding调整的方案

以下是几种可行的实现方法，结合你的现有代码调整即可：

1. 让按钮占满容器垂直空间 #

如果希望按钮尽可能填满父容器的高度，可通过给父容器设置高度并启用Flex布局，让按钮自动拉伸：

/* 给父容器设置高度并启用Flex布局 */
.col-md {
  height: 100vh; /* 让容器占满整个浏览器视口高度 */
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 按钮之间保留间距 */
  padding: 1rem; /* 避免按钮贴紧屏幕边缘 */
  box-sizing: border-box;
  margin: 0;
}

.cs-btn-print, .cs-btn-nprint{
  background-color: #0071bd;
  color: white;
  width: 100%;
  flex: 1; /* 让两个按钮平分容器的垂直空间 */
  padding: 1rem;      
  border-radius: 0.5rem;
  border: none; /* 移除浏览器默认按钮边框 */
  font-size: 1.2rem; /* 可选：放大文字增强视觉饱满度 */
}

2. 用视口单位实现响应式尺寸 #

使用vw/vh（视口宽度/高度单位）设置内边距和字体大小，让按钮尺寸随屏幕大小动态调整，确保在不同设备上都能最大化占比：

.cs-btn-print, .cs-btn-nprint{
  background-color: #0071bd;
  color: white;
  width: 100%;
  padding: 5vh 2vw; /* 内边距随视口缩放 */
  font-size: 3vw; /* 字体大小随视口宽度调整 */
  border-radius: 0.5rem;
  border: none;
  margin: 0;
  box-sizing: border-box; /* 确保padding不会超出容器宽度 */
}

3. 清理默认样式与多余元素 #

• 移除浏览器给按钮的默认样式：添加margin: 0; border: none;，避免默认间距和边框占用空间
• 删除HTML中空的<div class="row"></div>，这个空元素会占用垂直空间，压缩按钮的可扩展高度

4. 强制按钮高度匹配容器 #

如果父容器有固定高度，直接给按钮设置height: 100%，同时配合box-sizing: border-box确保内边距不会撑大按钮：

.col-md {
  height: 500px; /* 示例固定高度 */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
}

.cs-btn-print, .cs-btn-nprint{
  background-color: #0071bd;
  color: white;
  width: 100%;
  height: 100%;
  padding: 1rem;      
  border-radius: 0.5rem;
  border: none;
  box-sizing: border-box;
}

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