Материал Дизайн Lite липкий мини-нижний колонтитул, укороченный при использовании в гибком контейнере

Я пытаюсь реализовать липкий нижний колонтитул в рамках дизайна материала Lite. Я решил сделать это using flexbox, поскольку MDL использует его уже, и это самый гибкий и безопасный метод, который я знаю.Материал Дизайн Lite липкий мини-нижний колонтитул, укороченный при использовании в гибком контейнере

main.main-layout { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
} 
 
.page-content { 
 
    /*min-height: 500px;*/ 
 
} 
 

 
div.mdl-layout__container{ 
 
    height:auto; 
 
}

<html> 
 

 
<head> 
 
    <link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet" /> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> 
 
    <script src="https://code.getmdl.io/1.2.1/material.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="mdl-layout mdl-js-layout mdl-layout--no-drawer-button"> 
 
    <header class="mdl-layout__header mdl-layout__header--waterfall mdl-layout__header--waterfall-hide-top" id="djpsych-header"> 
 
     <div class="mdl-layout-icon"></div> 
 
     <div class="mdl-layout__header-row" id="djpsych-header__top-row"> 
 
     <div class="mdl-layout-spacer"></div> 
 
     <span class="mdl-layout__title"> Title of the site </span> 
 
     <div class="mdl-layout-spacer"></div> 
 
     </div> 
 
     <div class="mdl-layout__header-row"> 
 
     <div class="mdl-layout-spacer"></div> 
 
     some kind of navbar element 
 
     <div class="mdl-layout-spacer"></div> 
 
     <a id='top'></a> 
 
     </div> 
 
    </header> 
 

 
    <main class="mdl-layout__content main-layout"> 
 
     <div class="page-content"> 
 
     <p>This is the content of the page!</p> 
 
     <p>This is the content of the page!</p> 
 
     <p>This is the content of the page!</p> 
 
     <p>This is the content of the page!</p> 
 
     <p>This is the content of the page!</p> 
 
     <p>This is the content of the page!</p> 
 
     <p>This is the content of the page!</p> 
 
     <p>This is the content of the page!</p> 
 
     </div> 
 
     <footer class="mdl-mini-footer"> 
 
     <div class="mdl-mini-footer__middle-section"> 
 
      <div class="mdl-logo">Title</div> 
 
      <ul class="mdl-mini-footer__link-list"> 
 
      <li><a href="#">Help</a> 
 
      </li> 
 
      <li><a href="#">Privacy & Terms</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </footer> 
 
    </main> 
 
    </div> 
 
</body> 
 

 
</html>

Заголовок не может сделать на маленьком экране предварительного просмотра. Вы можете видеть, что нижняя половина нижнего колонтитула усечена. Это происходит только тогда, когда контент выше, чем область просмотра, в противном случае исправление липкого нижнего колонтитула отлично работает (попробуйте изменить min-height правила .page-content). Я заметил, что в этих случаях высота содержимого нижнего колонтитула становится 0, но когда содержимое <div class="page-content"> не заполняет окно просмотра, нижний колонтитул фактически имеет высоту. Это ошибка?

Обратите внимание, что html нижнего колонтитула берется непосредственно из документов MDL.

http://codepen.io/rivasd/pen/PGagLP

источник

2016-10-13 Daniel Rivas

Material Design Lite устанавливает .mdl-layout__container «s height к 100%, мешая способность внутренних элементов расти. Это приводит к тому, что .page-content переполняется из .mdl-layout__content, оставляя нулевой номер для нижнего колонтитула.

Избавиться от этого хлопот height!

.mdl-layout__container { 
    height: auto; 
}

источник

2016-10-14 00:03:25 darrylyeo

Я удалил все объявления свойств высоты в css и смоделировал фактический контент. вы можете увидеть, что проблема не устранена @darrylyeo –

Я уточнил свой ответ. – darrylyeo

Реализован ваш ответ, еще не повезло :(@darrylyeo –

Материал Дизайн Lite липкий мини-нижний колонтитул, укороченный при использовании в гибком контейнере

ответ

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