2016-04-19 2 views
0

Я боролся с некоторыми проблемами интеграции с угловым материалом.Угловой материал: предел md-content height

На образце кода ниже, я пытаюсь заставить оранжевыйdiv и синийdiv иметь одинаковую высоту, добавляя flex="50". Однако дочерний элемент синий div, содержащий большой текст, растет в высоту, тогда как он должен оставаться неизменным и прокручиваться в пределах его.

http://codepen.io/anon/pen/oxyBMJ

Как я могу заставить md-content элемент не расти в высоту независимо от того, длина его содержание?

Спасибо за вашу помощь

+0

это работает so..the синего Div детей свитка и не increasin высоты или уточнить более вашу проблему – DK3

+0

Но я хотел бы, что оранжевые и синий ДИВ держать ту же высоту. Потому что в этом случае, если я добавлю больше контента в 'md-content', div turqoise будет расти в высоту, когда мне хотелось бы, чтобы он оставался на той же высоте и прокручивался, если вы видите, что я имею в виду –

ответ

1

Вы должны использовать md-content в качестве основного контейнера.

<md-content layout-fill layout="column"> 
<div flex="50" style="border: 5px solid orange" layout="row"> 
</div> 
<div flex="50" style="border: 5px solid blue" layout="row"> 
</div> 
</md-content> 

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

http://codepen.io/next1/pen/vGrWaM

+0

Это замечательно! Но предполагая, что у меня более сложная вложенная структура. Как я могу достичь такого же результата в детских контейнерах? Например: http://codepen.io/anon/pen/vGrdrd –

+0

http://codepen.io/next1/pen/qZKodp вы пытаетесь добиться этого? – nextt1

+0

В основном, да, но могу ли я заставить его работать с синим div слева, который вы прокомментировали в коде? Есть ли шаблон макета для размещения бесконечно прокручиваемого md-контента? Спасибо за вашу помощь. –

1

вы должны дать родителю двух Див-х максимальную-высоту, а затем вы GIV мкр-контент height:100%; and overflow:auto; как этот мд-контент будет оставаться такой же высоты, как «контакт», и они не будет расти над родителем и не Pusch верхних

http://codepen.io/danyweis/pen/oxyZLK

+0

Спасибо, помощник! Есть ли способ сделать его более модульным без указания предела в пикселях? –

+0

вы можете ограничить его в%, но важно то, что родитель имеет ограниченную высоту, если он не работает – DanyCode

Смежные вопросы