2016-09-22 4 views
0

Я использую app-файл-ui и исправил его до вершины приложения React с высоким индексом z в моем основном компоненте. однако все компоненты моих детей используют display-flex. Я хочу, чтобы никому не препятствовали панели приложений. Я попытался установить margin-top для всех моих дочерних компонентов Div, но так как панель приложения меняет размер в соответствии с ориентацией и размером экрана, я могу установить фиксированный край. Есть ли решение?Как установить относительный margin-top для дочерних компонентов в Appbar?

ответ

0

Ваша проблема, похоже, не связана с отношением, по крайней мере, на данный момент времени id говорит, что это связано с 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 так, что ваш appbar будет всегда оставаться на вершине, но не будет скрывать другие элементы ниже

дайте мне знать, если это имеет смысл

+0

Майк, с приведенными выше свойствами css, моя панель приложения будет перемещаться, если я прокручу страницу, я хочу, чтобы она была зафиксирована вверху. – jasan

+0

Первый рендер компонентов для детей должен отображаться прямо под панелью приложений. позже, когда я прокручиваю содержимое, содержание детей должно быть разрешено прокручивать под панелью объявлений – jasan

+0

, как насчет того, чтобы поместить весь свой прокручиваемый контент в нижний div. Я имею в виду, что на верхнем уровне 2 divs одна из них - панель приложения, а нижняя - контейнер для всего остального. то просто переполнение: прокрутка –