如何消除因height:10vh缩放导致的navbar与box-shadow间的间隙？

问题根源 #

你遇到的间隙问题，核心原因是**height:10vh的响应式高度在窗口极小时被浏览器的最小渲染规则截断**：

• 当浏览器窗口高度低于某个阈值（比如浏览器自身的最小内容高度限制），navbar的实际渲染高度会小于计算出的10vh，但box-shadow是基于元素的理论计算高度（10vh）来定位的，导致阴影和元素本体之间出现空隙。
• 窗口高度恢复后，元素实际高度与计算高度一致，间隙自然消失。

解决办法 #

方案1：限制最小高度（推荐）

给navbar添加最小高度，避免窗口极小时元素高度被强制截断，同时保留响应式特性：

.navbar
{
    min-height: 50px; /* 自定义最小高度，确保窗口极小时元素不会被截断 */
    height: 10vh;
    background-color: blue;
    text-align: left;
    box-shadow: 10px 10px;
    position: relative;
    z-index:999;
}

方案2：改用固定高度

如果不需要navbar随窗口高度缩放，直接使用固定像素高度彻底避免高度计算偏差：

.navbar
{
    height: 60px; /* 固定高度 */
    background-color: blue;
    text-align: left;
    box-shadow: 10px 10px;
    position: relative;
    z-index:999;
}

方案3：调整阴影定位逻辑

让阴影的垂直偏移基于元素的实际底部定位，确保始终贴合元素：

.navbar
{
    height: 10vh;
    background-color: blue;
    text-align: left;
    box-shadow: 10px calc(100% - 0px) 0 0; /* 阴影顶部与元素底部对齐 */
    position: relative;
    z-index:999;
}

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