javascript - 在 styled-components 中传递 window.onload 的函数

Question

我目前正在研究一个没有完整高度的侧边栏。我试图让标题的高度减去窗口屏幕的高度。

const setSidebarHeight = () => {
    return (window.onload = () => {
        if (document.getElementById('navigation-bar')) {
            return ( window.innerHeight - document.getElementById('navigation-bar').clientHeight );
        }
    });
}

const SideBarDiv = styled.div`
    color: #232323;
    background-color: #f4f3f4;
    float: left;
    position: relative;
    z-index: 100;
    height: ${setSidebarHeight()}px;
`;

我有一个关于将 a 传递window.onload给 css 的问题height，当前代码的属性在 devtools 中没有显示任何 px。

请帮我解决这个问题。谢谢！

标签： javascriptcssreactjsstyled-components

Answer 1

借助CSS#calc，您可以进行动态高度计算。

使用view port高度

height : calc(100vh-20px) //20px height of header