- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图在 LeftNav 中创建一个固定的标题(在本例中为工具栏),以便当 LeftNav 滚动时,工具栏保持在其位置。但是以某种方式将 postion: 'fixed'
应用到工具栏似乎在 LeftNav 中不起作用。当 LeftNav 中的内容超过窗口高度时,整个 LeftNav,包括位于 fixed
位置的顶部工具栏,滚动。有没有人知道如何在 LeftNav 中创建固定位置元素?
引用代码如下:
...
const toolBarStyle = {
position: 'fixed',
top: 0,
};
return (
<LeftNav
open={open}
docked={false}
onRequestChange={onRequestChange}
>
<Toolbar style={toolBarStyle}> />
{this.props.children} // children could be a lot of content
</LeftNav>
);
...
最佳答案
好的,我明白了。我所做的就是将 LeftNav
本身设置为 position: 'fixed'
,并在内容周围添加一个包装器 div 并设置 overflowY: 'auto'
。这是代码:
......
render() {
const toolBarStyle = {
position: 'absolute',
top: 0,
};
const containerStyle = {
position: 'fixed',
top: 0,
overflowY: 'hidden',
};
const contentContainerStyle = {
marginTop: 57, // the same height as the toolbar
width: '100%',
// you can obtain the window height whatever way you want.
// I was using Redux so I pass it down from parent component as a prop
height: this.props.windowSize.height - 57,
overflowY: 'auto',
};
return (
<LeftNav
style={containerStyle}
docked={false}
onRequestChange={onRequestChange}
>
<Toolbar style={toolBarStyle} />
<div style={contentContainerStyle}>
{this.props.children}
</div>
</LeftNav>
);
...
关于css - material-ui LeftNav 中的固定标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36099284/
我正在尝试在 中创建一个粘性页脚组件,到目前为止没有成功。这是需要的样子: 我试过使用 position: fixed; bottom: 0和 position: absolute; bottom:
我试图在 LeftNav 中创建一个固定的标题(在本例中为工具栏),以便当 LeftNav 滚动时,工具栏保持在其位置。但是以某种方式将 postion: 'fixed' 应用到工具栏似乎在 Left
之前 this PR 通过将“顶部”属性应用于组件样式,我可以轻松地将 LeftNav 向下移动以不覆盖 AppBar。 现在这个 PR 将样式应用于根元素,这不再起作用,并且 LeftNav 是全高
我有一个主要内容区域和侧边栏,是结合使用 Bootstrap 和 Flexbox 创建的。 我想修复导航栏不随页面滚动的问题,但是如果我应用 position: fixed 它不再填充它的水平空间..
我正在发现 ReactJS 和material-ui ( http://material-ui.com/ )。 我尝试为我的应用程序创建默认模板。我想在单独的组件中使用 AppBar 和 LeftNa
我正在使用 meteor react-packages 并且我的应用栏显示正确,但我无法让导航切换工作。我直接使用示例中的代码,我什至阅读了 material-ui repo 中的代码,它似乎应该可以
我尝试使用 Material UI 实现 React JS,但遇到了左侧导航栏切换行为的问题。 我已使用 Yeoman 命令创建了组件。 有2个组件 BodyComponent - 父级 Header
好吧,所以我对使用material-ui制作LeftNav菜单的方式感到非常困惑。 我是这个项目的新人,我更新了reactjs和material-ui。 因此,Material-ui 中有关 Left
我是一名优秀的程序员,十分优秀!