Предотвращение развала flexbox div в угловом материале

Я разрабатываю приложение AngularJS (v1.5) с использованием углового материала, и я застрял в реализации макета. Это в основном заголовок с фиксированной высотой, за которым следует содержимое переменной высоты, за которым следует нижний колонтитул с фиксированной высотой. Полная страница должна прокручиваться (включая заголовок), а нижний колонтитул должен быть нажат в нижней части окна, когда недостаточно содержимого для заполнения пространства между верхним и нижним колонтитулом.Предотвращение развала flexbox div в угловом материале

Я создал ручку с кодом, который у меня до сих пор (заменил компоненты на div и представил все промежуточные div, вставленные Angular), но когда я уменьшаю высоту окна, содержимое сворачивается на высота нуля вместо того, чтобы поддерживать высоту содержимого и показывать полосу прокрутки.

Проблема, вероятно, в классе .main CSS, но я не могу понять, что мне следует помещать туда.

HTML-:

<body ng-app="app"> 
    <!-- ui-view div --> 
    <div layout="column" layout-fill> 
    <!-- component div --> 
    <div layout-fill> 
     <!-- my own div around the page content --> 
     <div layout="column" layout-fill> 
     <!-- header component div --> 
     <div flex="none"> 
      <header flex="none"> 
      <md-toolbar> 
       <div class="container"> 
       <div class="md-toolbar-tools" layout="row" layout-align="center center"> 
        <div flex></div> 
        <h1>HEADER</h1> 
        <div flex></div> 
       </div> 
       </div> 
      </md-toolbar> 
      </header> 
     </div> 
     <!-- content div --> 
     <div flex class="container main"> 
      <h2>CONTENT</h2> 
     </div> 
     <!-- footer component div --> 
     <div flex="none"> 
      <footer flex="none"> 
      <md-toolbar> 
       <div class="container"> 
       <div class="md-toolbar-tools" layout="row" layout-align="center center"> 
        <div flex></div> 
        <h1>FOOTER</h1> 
        <div flex></div> 
       </div> 
       </div> 
      </md-toolbar> 
      </footer> 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

CSS-:

header, footer { 
    md-toolbar { 
    height: 100px; 
    min-height: 100px; 
    background-color: #C8C8C8; 

    .md-toolbar-tools { 
     height: 100px; 
     min-height: 100px; 
    } 
    } 
} 

.container { 
    width: 600px; 
    margin: 0 auto; 
} 

.main { 
    background-color: #E8E8E8; 
}

И JavaScript:

angular.module("app", ['ngMaterial']);

Ручка: http://codepen.io/kdbruin/pen/ZLwmvW

источник

2017-02-17 Kees de Bruin

ОК, просто разместил это и нашел решение: удалите flex из div «container main» и оберните содержимое в другой div. Я обновил ручку, чтобы включить это изменение. –

Другое изменение: изменил стиль .main CSS, чтобы включить 'flex: 1 0 0%' и 'height: calc (100vh - 200px)', поскольку это работает на моей тестовой системе, но не в ручке. Необходимо провести дополнительное расследование. –

Вы можете использовать гибкий = "расти "с min-height на контейнере для достижения желаемого результата.

Вот код

<div layout="column" flex="grow" style='background-color:green'> 
<md-toolbar> 
    <div flex="10"> 
    <div class="md-toolbar-tools" layout="row" layout-align="center center"> 
     <div flex></div> 
     <h1>HEADER</h1> 
     <div flex></div> 
    </div> 
    </div> 
</md-toolbar> 
<div flex="grow" style='background-color:pink; min-height:1000px'> 
    <div ng-repeat="no in [0,1,2,3,4,5,6,7,8,9]"> 
    <h2>CONTENT - {{no}}</h2> 
    </div> 
</div> 
<div flex="10" style='background-color:blue'> 
    <div flex></div> 
    <h1>FOOTER</h1> 
    <div flex></div> 
</div>

Вот рабочий Codepen.

источник

2017-02-17 14:23:06 nextt1

Это работает как шарм и устраняет необходимость дополнительного div вокруг контента. Тем не менее, значение 'min-height' должно быть установлено в' calc (100vh - 200px) ', чтобы учитывать высоту как верхнего, так и нижнего колонтитула. –

Вы можете использовать значение 'min-height' по желанию. :) – nextt1

Предотвращение развала flexbox div в угловом материале

ответ

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