在CSS中动态获取导航栏的高度

Question

我的网站是基于React和react-strap。好吧，我有我的.header-overlay覆盖整个背景.header。但这里发生的情况是，由于.navbar，垂直.header-overlay伸出.header。

我认为使用calc(100vh - heightOfNavigationBar)可以解决这个问题。但是，我找不到任何方法来.navbar动态获取高度。有什么办法可以解决这个问题吗？（导航栏嵌入在react-strap中）

CSS代码：

.navbar{
    font-size: 20px;
}

.header {
    background: url("../images/headerbg.jpg") no-repeat 50% 50% fixed ;
    background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    height: 100vh;
}

.header-overlay {
    background-color: rgba(31, 31, 31, 0.4);
    height: 100vh;
}

HTML 代码：

<header className="header">

        {/*Navigation Bar*/}
        <div>
             <NavBar/> <--from react-strap
        </div>


        <div className="header-overlay">
             SOME CODE HERE
        <div>
</header>

Answer 1

这真的很简单

将“导航栏”ID 添加到您的导航中

使用JS设置属性值：

document.documentElement.style.setProperty('--nav-height', document.getElementById("navbar").offsetHeight);

在 CSS 中使用属性：

例子：

:root {
    --nav-height: 70px; /*You HAVE To Give A Default Fallback Value*/
}

.container-fs{
    width: 100vw;
    height: calc(100vh - var(--nav-height));
}

它是如何工作的？

document.getElementById("navbar").offsetHeight

此代码使用 ID 选择导航栏并获取导航栏的高度

document.documentElement.style.setProperty();

此代码将 CSS 属性（又名变量）设置为导航的高度。

var(--nav-height)

此 CSS 函数返回属性的值（导航栏的高度）