Разметка Flex Flex и второстепенный нижний колонтитул

Я начал свое приключение с помощью flex (версия с угловым материалом, если быть точным), и подошел к сложной проблеме. В принципе, у меня был бы торт и есть пирог :) Итак, я хочу, чтобы мой нижний колонтитул всегда был внизу, но в маленьких разрешениях, пока страница очень короткая, мне бы хотелось избежать плавания по нижнему колонтитулу по основному содержимому и не устанавливать жесткую высоту для содержание.Разметка Flex Flex и второстепенный нижний колонтитул

Моя страница разметки, как:

<body> 
    <ui-view layout="column" layout-fill> 
     <md-toolbar>top menu</md-toolbar> 
     <div class="main-content" layout="row" flex layout-fill> 
      <md-sidenav flex="15" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">left menu</md-sidenav> 
      <md-content flex>page content</md-content> 
     </div> 
     <footer>footer</footer> 
    </ui-view> 
</body>

источник

2017-01-16 cachaito

Вы должны опубликовать достаточно кода, чтобы воспроизвести проблему. –

ли я понимаю, вы исправите с этим решением? ... и когда содержание превышает в иллюминатор он толкает либо футер вниз, и все страницы будут прокручиваться

html, body { 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex;   /* IE 11/10 min-height bug fix */ 
 
} 
 
ui-view { 
 
    min-height: 100vh; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.main-content { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 
md-sidenav { 
 
    background: lightgray; 
 
} 
 
md-content { 
 
    background: lightblue; 
 
    flex: 1; 
 
}

<body> 
 
    <ui-view layout="column" layout-fill> 
 
     <md-toolbar>top menu</md-toolbar> 
 
     <div class="main-content" layout="row" flex layout-fill> 
 
      <md-sidenav flex="15" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">left menu</md-sidenav> 
 
      <md-content flex> 
 
      page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content 
 
     </md-content> 
 
     </div> 
 
     <footer>footer</footer> 
 
    </ui-view> 
 
</body>

или main-content начинает прокручивать

html, body { 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex;   /* IE 11/10 min-height bug fix */ 
 
} 
 
ui-view { 
 
    height: 100vh; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.main-content { 
 
    flex: 1; 
 
    display: flex; 
 
    overflow: auto; 
 
    background: lightgray; 
 
} 
 
md-sidenav { 
 
    width: 120px; 
 
} 
 
md-content { 
 
    background: lightgreen; 
 
    flex: 1; 
 
} 
 
.wrapper { 
 
    background: lightblue; 
 
}

<body> 
 
    <ui-view layout="column" layout-fill> 
 
     <md-toolbar>top menu</md-toolbar> 
 
     <div class="main-content" layout="row" flex layout-fill> 
 
      <md-sidenav flex="15" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">left menu</md-sidenav> 
 
      <md-content flex> 
 
      <div class="wrapper"> 
 
      page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content 
 
      </div> 
 
      </md-content> 
 
     </div> 
 
     <footer>footer</footer> 
 
    </ui-view> 
 
</body>

источник

2017-01-17 22:26:03 LGSon

Разметка Flex Flex и второстепенный нижний колонтитул

ответ

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