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

如果选择ggplot()+ geom_line(data=df1, aes(x=day, y=b), color="red") + geom_line(data=df2, aes(x=day, y=c ), color="green")+ geom_line(data=df3, aes(x=day, y=d*50/3), color="blue")+ scale_y_continuous(limits=c(0, 50), sec.axis = sec_axis(~ . *3/50, name = "name of the new axis"))+ labs(x="Days", y="Number of occurrences")，您的解决方案将如下所示：

position: absolute

.navbar{
    font-size: 20px;
    z-index: 1;
}

.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;
    position: relative;
}

.header-overlay {
    background-color: rgba(31, 31, 31, 0.4);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Answer 2

其实很简单

将“导航栏”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 选择 Navbar 并获取 Nav 的高度

document.documentElement.style.setProperty();

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

var(--nav-height)

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

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

2 个答案: