我目前正在制作一个没有完整高度的侧边栏。我试图让标题的高度减去窗口屏幕的高度。
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;
`;
我有一个关于将window.onload
传递给css属性height
的问题,当前代码在devtools中没有显示任何px。
请帮我解决这个问题。谢谢!
答案 0 :(得分:1)
答案 1 :(得分:0)
我不太明白你的问题,但我有更好的方法来做到这一点
const setSidebarHeight = () => {
return (window.onload = () => {
if (document.getElementById('navigation-bar')) {
return ( window.innerHeight - document.getElementById('navigation-bar').clientHeight );
}
});
};
render() {
<SideBarDiv height={this.setSidebarHeight()} />
}
const SideBarDiv = styled.div`
// ....
height: ${props => props.height}px;
`;
答案 2 :(得分:0)
虽然RIYAJ KHAN的回答引出了最好的方法,但我会回答你原来的问题。
您只需在onLoad方法中设置一个变量,并在组件字符串中引用它。
var panelHeight = 0;
window.onload = () => {
if (document.getElementById('navigation-bar')) {
panelHeight = window.innerHeight - document.getElementById('navigation-bar').clientHeight ;
}
}
则...
const SideBarDiv = styled.div`
color: #232323;
background-color: #f4f3f4;
float: left;
position: relative;
z-index: 100;
height: ${panelHeight}px;
`;