Appbar下如何设置子组件的相对margin-top？答案

【问题标题】：how to set a relative margin-top for children components under Appbar?Appbar下如何设置子组件的相对margin-top？
【发布时间】：2017-01-31 09:51:14
【问题描述】：

我正在使用 material-ui Appbar 并将其固定在我的 Main 组件中具有高 z-index 的 React 应用程序的顶部。但是，我所有的子组件都在使用 display-flex。我想避免任何孩子被应用栏挡住。我尝试为我的所有子组件 Div 设置一个 margin-top，但是由于应用栏根据方向和屏幕尺寸调整大小，我可以设置一个固定的 margin-top。有解决办法吗？

【问题讨论】：

标签： css reactjs styling material-ui

【解决方案1】：

the docs 中解释了几个解决方案。其中之一是在 appbar 之后呈现一个空的工具栏：

<AppBar position="fixed">
    <Toolbar>{/* content */}</Toolbar>
</AppBar>
<Toolbar />

【讨论】：

【解决方案2】：

您的问题似乎与反应无关，至少目前是这样我说它与 CSS 相关。

如果我知道你有这样的事情

<body>
<div class="fixed-to-top"></div>
<div class="react-root"></div>
</body>

你为什么不把你的 appbar 设置成以下：

.fixed-to-top{
   position:relative; 
   top:0;
}

body {
 display: flex;
 flex-flow: column;
 justify-content:flex-start;
}

并将上面的 css 添加到您的 css 中，以便您的应用栏始终保持在顶部，但不会遮挡下面的其他元素

让我知道这是否有意义

【讨论】：

Mike ，使用上面的css属性，如果我滚动页面，我的应用栏会移动，我希望它固定在顶部。
子组件的第一次渲染应该在应用栏的正下方渲染。稍后当我滚动内容时，应允许子内容在应用栏下滚动
如何将所有可滚动内容放在底部 div 中。我的意思是，在顶级 2 div 中，一个是 appbar，而底部一个是所有其他内容的容器。然后就做溢出：滚动
有点不清楚，每当我将应用栏位置更改为非固定位置时，应用栏都会滚动移动。
看看这个小提琴，这就是我的意思。 JSFiddle