угловой материал святой Грааль flexbox макет

Я использую веб-кисть с угловым материалом, и у меня проблема с высотой контейнера, который всегда устанавливается в зависимости от устройства. Проблема, с которой я сталкиваюсь, состоит в том, что дочерние элементы «оставляют» средний контейнер и рендеринг в области нижнего колонтитула. На изображении номер 1 показывает ситуацию, когда содержание зеленой зоны достаточно мал, чтобы соответствовать высоте устройства. Номер 2 показывает мою проблему и 3 мой идеальный макет: угловой материал святой Грааль flexbox макет

Моей раскладка выглядит следующим образом:

<body layout="column"> 
    <div> header </div> 
    <div layout="row" flex"> 
    <md-sidenav md-is-locked-open="true" flex="20"></md-sidenav> 
    <div layout="column" flex ui-view></div> 
    <md-sidenav class="md-sidenav-right" md-is-locked-open="true" flex="20"></md-sidenav> 
    </div> 
    <div class=footer"></div> 
</body>

я не могу найти решение на угловом-материале Docs - возможно, я не получаю некоторые из идей, но это второй день, когда я пытаюсь реализовать этот макет, и я все еще терпеть неудачу.

источник

2016-09-25 Konrad Janczyk

Я думаю, что это лучшее, что вы можете сделать с Flex - CodePen

Markup

<div id="all" ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout="column" flex> 
    <div style="background:red; height:100px"></div> 
    <div layout="row" flex="90"> 
    <div style="background:blue" flex="10"></div> 
    <div layout="column" flex="80"> 
     <div > 
      <!-- content --> 
     </div> 
     <div style="background:yellow; height:100px"></div> 
    </div> 
    <div style="background:blue" flex="10"></div> 
    </div> 
</div>

источник

2016-09-25 14:39:56

спасибо за помощь! к сожалению, это не то, что я хотел сделать. Я не хочу, чтобы содержимое переполнялось, я хочу, чтобы этот контейнер получил большую высоту, так что нижний колонтитул будет ниже содержимого и navbars. Я не хочу фиксированный нижний колонтитул или внутренний свиток в содержимом. Чтобы быть на 100% понятным - в кодеде, когда вы удаляете переполнение, нижний колонтитул посередине - я хочу его в нижнем конце –

@KonradJanczyk - См. Обновление. Я думаю, вам нужно будет определить высоты специально для верхнего и нижнего колонтитулов, но это не проблема, поскольку вы, вероятно, захотите, чтобы они были исправлены. –

Спасибо за это! подумал, что могу сделать это более «чистым» способом, но это должно сделать –

угловой материал святой Грааль flexbox макет

ответ

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