Проблема с вложенной гибкой компоновкой с использованием сокращения углового материала

Question

Проблема с вложенной гибкой компоновкой с использованием сокращения углового материала

0

Мне сложно сказать, что случилось со следующим макетом.

Я пытаюсь сохранить компоновку SPA с самым "глубоким" компонентом, только прокручиваемым, если VH слишком мал (помечен в фрагменте с overflow-y:scroll и border: 3px solid black), родительские divs должны следовать за окном просмотра границы в любом случае.

http://codepen.io/minikrob/pen/yJKzKj
Пример: http://i.imgur.com/zq0tbx5.png

Кто-нибудь имеет представление о том, как достичь этого?

Изменение: это была проблема с более старой версией Google Chrome... еще раз спасибо @kuhnroyal & @Chanthu!

Minikrob 21 июль 2016, в 12:09

Источник

Теги:

angularjs

css

angular-material

layout

flexbox

2 ответа

0

Для прокручиваемого элемента вы должны использовать таблицу углового материала layout="column|row на родителях и md-content.

<div flex="" class="maincontent pushable" layout="column">
  <div flex="" class="pusher" layout="column">
    <!-- ngView: content-wrapper -->
    <md-content id="content-wrapper" flex="">

Вот ручка: http://codepen.io/kuhnroyal/pen/QEmOvk

И вы должны прочитать https://material.angularjs.org/latest/layout/container

kuhnroyal 21 июль 2016, в 08:47

0

Спасибо kuhnroyal и Chanthu за ответ, вот что мне нужно: - зеленая граница div, чтобы сгибаться в оранжевую рамку - черная граница внутри зеленой, включая поля Вот пример того, что я пытаюсь заболеть : i.imgur.com/zq0tbx5.png
Minikrob 21 июль 2016, в 11:24
0

Из того, что я могу сказать, это именно так, как ведет себя ручка.
kuhnroyal 21 июль 2016, в 11:42
0

Хорошо, спасибо за то, что настаиваете, проблема, похоже, исходит от Chrome, поскольку ваше перо эффективно работает на FF ... Теперь, чтобы найти корневую проблему ... Еще раз спасибо!
Minikrob 21 июль 2016, в 11:56
0

У меня FF и Chrome работают одинаково. Какую версию Chrome вы используете? Мне 53 года.
kuhnroyal 21 июль 2016, в 12:00
1

Еще раз спасибо, это была действительно проблема с моей версией Chrome (ранее 48)!
Minikrob 21 июль 2016, в 12:23

Показать ещё 3 комментария

Ещё вопросы

Спасибо kuhnroyal и Chanthu за ответ, вот что мне нужно: - зеленая граница div, чтобы сгибаться в оранжевую рамку - черная граница внутри зеленой, включая поля Вот пример того, что я пытаюсь заболеть : i.imgur.com/zq0tbx5.png
Из того, что я могу сказать, это именно так, как ведет себя ручка.
Хорошо, спасибо за то, что настаиваете, проблема, похоже, исходит от Chrome, поскольку ваше перо эффективно работает на FF ... Теперь, чтобы найти корневую проблему ... Еще раз спасибо!
У меня FF и Chrome работают одинаково. Какую версию Chrome вы используете? Мне 53 года.
Еще раз спасибо, это была действительно проблема с моей версией Chrome (ранее 48)!

Chanthu · Accepted Answer · 2016-07-21T08-40-00.000Z

Если внутренний контейнер с черной рамкой - это тот, который вы хотите прокрутить, посмотрите на это: http://codepen.io/anon/pen/Wxzkmr

Исправить было добавление height:100%; к элементам .pusher и #content-wrapper.

Как это исправить? хм... css странно.