按钮已实现宽度响应式适配，如何实现高度的响应式效果？

问题根因 #

百分比高度height: 90%无法生效的核心原因是：百分比高度的计算依赖父元素的明确高度定义，如果按钮的所有上级元素都未设置固定/可计算的高度值，浏览器无法解析90%对应的具体尺寸，最终会 fallback 为高度自适应按钮内部内容。

可用解决方案 #

方案1：使用视口高度单位vh实现响应式高度 #

vh是相对于浏览器视口高度的原生单位，1vh等于视口高度的1%，不需要依赖父元素高度即可生效，天然适配各种屏幕尺寸：

.Block {    
    display: inline-block;
    padding: 2px;
    margin: 2px;
    vertical-align: top;
    width: 90%;
    height: 8vh; /* 可自行调整数值，实现高度随视口变化 */
    background-color: yellow;
    color: black;
    /* 可选加过渡效果让样式变化更顺滑 */
    transition: all 0.3s ease;
}

.Block:hover {    
    /* 仅需写变化的属性，无需重复继承的相同属性 */
    width: 34%;
    height: 20vh; /* 可自行调整hover状态的高度 */
}

方案2：使用padding百分比实现高度随宽度等比自适应 #

如果需要按钮高度跟随宽度同比例变化，可使用百分比padding属性（百分比padding默认相对于元素宽度计算）：

.Block {    
    display: inline-block;
    margin: 2px;
    vertical-align: top;
    width: 90%;
    height: 0; /* 关闭默认内容高度 */
    /* 上下padding控制高度比例，示例为宽度的10%，可自行调整 */
    padding-top: 10%;
    padding-bottom: 10%;
    background-color: yellow;
    color: black;
    transition: all 0.3s ease;
    /* 文字垂直居中配置 */
    line-height: 0;
    text-align: center;
}

.Block:hover {    
    width: 34%;
    /* hover时调整padding比例即可修改高度 */
    padding-top: 30%;
    padding-bottom: 30%;
}

方案3：给父元素设置明确高度 #

如果要保留原生百分比高度写法，需要给按钮所有上级元素逐级设置可计算的高度值，示例如下：

/* 根元素和body先设置高度 */
html, body {
    height: 100%;
    margin: 0;
}
/* 如果按钮外层还有自定义父容器，也需要给父容器加height: 100% */
.Block {
    /* 其余原有属性不变 */
    height: 10%;
}
.Block:hover {
    height: 90%;
}

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