如何将CSS vh单位换算匹配原px配置并修复编辑文本框异常？

问题背景 #

维基媒体近期升级编辑页面布局，将CSS单位从px改为vh，导致多个固定高度文本框被拉长，无法正常编辑。当前使用1664×936（16:9）分辨率屏幕，不清楚vh的计算基准，同时需要消除编辑界面的空白蓝色区域。

关于vh单位的说明 #

vh是视口高度单位，1vh = 浏览器窗口内部可见区域高度的1%（即不含浏览器边框、地址栏等外部元素的窗口高度）。

现有CSS问题分析 #

你提供的代码存在两处关键问题：

• #wpHeaderTextbox, #wpFooterTextbox的max-height属性缺少闭合括号，语法错误会导致样式失效
• 固定使用calc(100vh - 数值px)的计算方式，未考虑屏幕尺寸差异，在你的屏幕上计算出的高度过大，直接导致文本框被拉长

修复方案 #

方案1：恢复固定高度（适配原有体验） #

如果希望保持原有的固定高度逻辑，直接将vh相关计算改回原px值：

/* 文本图片窗口高度，恢复原300px */
.prp-page-image-openseadragon-horizontal {
    width:100% !important;
    max-height:300px;
    min-height:300px;
}

/* 页眉页脚文本框高度，恢复原60px */
#wpHeaderTextbox, #wpFooterTextbox {
    font-size:120% !important;
    max-height:60px;
    min-height:60px;
    color: #000 !important;
    background-color: #F5F5F5;
}

/* 主文本区域高度，恢复原300px */
.mw-editform #wpTextbox1 {
    display:block !important;
    font-size:120% !important;
    max-height:300px;
    min-height:300px;
    color: #000 !important;
    background-color: #F5F5F5 !important;
}

方案2：适配动态视口（避免过度拉伸） #

如果要保留动态单位特性，调整计算值并添加最大高度限制，防止文本框过高：

/* 文本图片窗口：限制最大高度为300px，同时适配小屏幕 */
.prp-page-image-openseadragon-horizontal {
    width:100% !important;
    max-height:min(calc(100vh - 636px), 300px);
    min-height:200px; /* 给小屏幕设置最低高度 */
}

/* 页眉页脚文本框：修复语法错误，限制最大高度为60px */
#wpHeaderTextbox, #wpFooterTextbox {
    font-size:120% !important;
    max-height:min(calc(100vh - 876px), 60px);
    min-height:40px;
    color: #000 !important;
    background-color: #F5F5F5;
}

/* 主文本区域：限制最大高度为300px，适配不同屏幕 */
.mw-editform #wpTextbox1 {
    display:block !important;
    font-size:120% !important;
    max-height:min(calc(100vh - 636px), 300px);
    min-height:200px;
    color: #000 !important;
    background-color: #F5F5F5 !important;
}

方案3：使用CSS clamp()实现自适应 #

更灵活的方式是用clamp()设置高度范围，兼顾不同屏幕尺寸：

.prp-page-image-openseadragon-horizontal {
    width:100% !important;
    height:clamp(200px, calc(100vh - 636px), 300px);
}

#wpHeaderTextbox, #wpFooterTextbox {
    font-size:120% !important;
    height:clamp(40px, calc(100vh - 876px), 60px);
    color: #000 !important;
    background-color: #F5F5F5;
}

.mw-editform #wpTextbox1 {
    display:block !important;
    font-size:120% !important;
    height:clamp(200px, calc(100vh - 636px), 300px);
    color: #000 !important;
    background-color: #F5F5F5 !important;
}

注意事项 #

• 优先修复#wpHeaderTextbox的语法错误（补上calc()的闭合括号），这是当前样式失效的核心原因之一
• 如果使用浏览器用户样式插件（如Stylus），确保样式优先级足够（保留!important或提升选择器权重）

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