如何使用calc动态计算height为fit-content的navbar对应偏移高度

解决方案 #

方案1：纯CSS无计算最优实现（推荐） #

不需要手动计算em数值，只需两步调整即可实现自适应效果：

1. 给父级nav添加position: relative，让下拉菜单的绝对定位锚定到导航栏本身，而非整个视口
2. 把.link-menu的固定top值改为top: 100%，同时删除固定高度计算规则，新增bottom: 0，浏览器会自动将下拉菜单的高度适配为从导航栏底部到视口底部的剩余高度

修改后的代码如下：

调整后的导航栏样式

nav {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    background-color: var(--dark);
    border-bottom: 0.187em solid var(--bootstrap-primary);
    height: fit-content;
    overflow-x: hidden;
    position: relative; /* 新增这行 */
}

调整后的下拉菜单样式

.link-menu {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-evenly;
    align-content: center;
    background-color: var(--dark);
    position: absolute;
    top: 100%; /* 替换原来的2.24em */
    width: 50%;
    bottom: 0; /* 新增这行，替换原来的height计算规则 */
    opacity: 0.8;
    transform: translate(-100%);
}

该方案完全适配导航栏的动态高度，不管根字体如何变化、导航栏内容如何调整高度，下拉菜单都会自动贴在导航栏下方，撑满剩余视口高度。

方案2：需用calc计算em值的实现 #

如果业务场景要求必须通过calc计算数值，可以通过CSS变量+少量JS绑定导航栏实时高度实现：

1. 全局声明CSS变量--nav-height
2. 页面加载和窗口resize时，把导航栏的offsetHeight转为em单位赋值给--nav-height
3. 下拉菜单的top和height直接调用该变量即可

JS代码示例：

// 页面加载、窗口尺寸变化时更新导航栏高度变量
function setNavHeight() {
  const nav = document.querySelector('nav')
  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
  const navHeightEm = nav.offsetHeight / rootFontSize
  document.documentElement.style.setProperty('--nav-height', `${navHeightEm}em`)
}
window.addEventListener('load', setNavHeight)
window.addEventListener('resize', setNavHeight)

调整后的下拉菜单样式：

.link-menu {
    /* 其余样式保持不变 */
    top: var(--nav-height);
    height: calc(100vh - var(--nav-height));
}

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